<canvas>元素是HTML5添加的特性，这个元素负责在页面中设定一个区域，然后就可以通过 JS 动态地在这个区域中绘制图形。
15.1 基本用法
要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。
<canvas id="drawing" width="200" height="200" >
A drawing of something
</canvas>
使用 toDataURL() 方法，可以导出在<canvas>元素上绘制的图像。这个方法接收一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。
15.2 2D上下文
2D上下文的坐标开始于 <canvas> 元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下。
15.2.1 填充和描边
2D 上下文的两种基本绘图操作是填充和描边。
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
context.strokeStyle = 'red'; //描边
context.fillStyle = "#0000ff"; //填充
}
15.2.2 绘制矩形
矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect()、strokeRect()和clearRect()。这三个方法都能接收4个参数：矩形的x坐标，矩形的y坐标，
矩形宽度和矩形高度。单位都是像素。
(1) fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充颜色通过 fillStyle 属性指定
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
}
(2) strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过 strokeStyle 属性指定
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
context.lineWidth = 10; //控制线条宽度
context.lineCap = 'square';//控制线条末端形状：butt：平头 round: 圆头 square: 方头
context.lineJoin = "miter" //控制线条相交方式圆交、斜交、斜接(round,bevel,miter)
//绘制红色描边矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10,10,50,50);
//绘制半透明的蓝色描边矩形
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30,30,50,50);
}
(3) clearRect() 方法用于清除画布上的矩形区域，这个方法可以把绘制上下文中的某一矩形区域变透明。
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
//在两个矩形重叠的地方清除一个小矩形
context.clearRect(35,35,20,20);
}
15.2.3 绘制路径
//绘制一个不带数字的时钟表盘
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//开始路径
context.beginPath();
//绘制外圆
context.arc(100, 100, 100, 0, 2 * Math.PI, false);
//绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 90, 0, 2 * Math.PI, false);
//绘制分针
context.moveTo(100, 100);
context.lineTo(100, 15);
//绘制时针
context.moveTo(100, 100);
context.lineTo(35, 100);
//描边路径
context.stroke();
}
//绘制一条弯曲的线
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//指定绘制路径的起始点
context.moveTo(50, 50);
//绘制一条到坐标(150,50)的水平直线
context.lineTo(150, 50);
//端点1
var p1 = {
x: 200,
y: 50
};
var p2 = {
x: 200,
y: 100
};
context.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
//设置线条颜色为蓝色
context.strokeStyle = "blue";
//按照上述绘制路径绘制弧线
context.stroke();
}
15.2.4 绘制文本
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//开始路径
context.beginPath();
context.font = "bold 14px Arial";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('12', 100, 20);
context.fillText('9', 20, 100);
context.fillText('6', 100, 140);
context.fillText('3', 180, 100);
//起点对齐
context.textAlign = "start";
context.fillText("12", 100, 40);
//终点对齐
context.textAlign = "end";
context.fillText('12',100,60);
//绘制外圆
context.arc(100, 100, 100, 0, 2 * Math.PI, false);
//绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 90, 0, 2 * Math.PI, false);
//绘制分针
context.moveTo(100, 100);
context.lineTo(100, 15);
//绘制时针
context.moveTo(100, 100);
context.lineTo(35, 90);
//描边路径
context.stroke();
}
15.2.5 变换
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//开始路径
context.beginPath();
context.font = "bold 14px Arial";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('12', 100, 20);
context.fillText('9', 20, 100);
context.fillText('6', 100, 140);
context.fillText('3', 180, 100);
//起点对齐
context.textAlign = "start";
context.fillText("12", 100, 40);
//终点对齐
context.textAlign = "end";
context.fillText('12',100,60);
//绘制外圆
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
//绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
//变换原点
context.translate(100, 100);
//旋转表针
context.rotate(0.2);
//绘制分针
context.moveTo(0, 0);
context.lineTo(0, -85);
//绘制时针
context.moveTo(0, 0);
context.lineTo(-65, 0);
//描边路径
context.stroke();
}
15.2.6 绘制图像
</img>
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
var image = document.images[0];
context.drawImage(image, 20, 10, 50, 50, 260, 100, 40, 60);
}
15.2.7 阴影
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//设置阴影
context.shadowOffsetX = 10; //x轴方向的阴影偏移量
context.shadowOffsetY = 10; //y轴方向的阴影偏移量
context.shadowBlur = 4; //模糊的像素数，默认为0，即不模糊
context.shadowColor = 'rgba(0,0,0,0.5)'; //阴影颜色，默认为黑色
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30,30,50,50);
}
15.2.8 渐变
(1) 横向渐变
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
var gradient = createRectLinearGradient(context,30,30,50,50);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'black');
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30,30,50,50);
}
//确保渐变与形状对齐
function createRectLinearGradient(context, x, y, width, height){
return context.createLinearGradient(x,y,x+width,y+height);
}
//径向渐变(或放射渐变)
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
var gradient = context.createRadialGradient(55,55,10,55,55,30);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'black');
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30,30,50,50);
}
15.2.9 模式
模式其实就是重复的图像，可以用来填充或描边图形
</img>
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
var image = document.images[0],
pattern = context.createPattern(image, 'no-repeat');
//绘制矩形
context.fillStyle = pattern;
context.fillRect(10,10,150,150);
}
15.2.10 使用图像数据
可以通过 getImageData() 取得原始图像数据。这个方法接收4个参数：
要取得其数据的画面区域的x和y坐标以及该区域的像素宽度和高度。
15.2.11 合成
15.3 WebGL
