canvas绘图

基础

<canvas>由几组API构成，并非所有的浏览器都支持这些API。
除了具备基础绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文。

<canvas id="drawing" width="200" height="200">drawing</canvas>

var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素
if(drawing.getContext) {
    var context = drawing.getContext("2d");
}

要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。
要在canvas上绘图，需取得绘图上下文，即调用getContext()方法，传入“2d”即可取得2D上下文对象
使用toDataURL（）方法，可以导出<canvas>元素上绘制的图像。

2D上下文

2D上下文的坐标开始于<canvas>元素的==左上角==。

填充和描边

属性：

填充：fillStyle
描边：strokeStyle

绘制矩形

==矩形是唯一一种可以直接在2D上下文中绘制的形状。==

var drawing = document.getElementById("drawing");

if(drawing.getContext) {
    var context = drawing.getContext("2d");
    
    //先指定填充颜色再绘制(填充)
    context.fillStyle = "red";
    context.fillRect(10, 10, 50, 50);
    
    //现指定描边颜色再绘制(描边)
    context.strokeStyle = "red";
    context.strokeRect(10, 10, 50, 50);
    
    //指定颜色可以通过rgba
    context.fillStyle = "rgba(255, 0, 0, 0.5)";
    
    //清除矩形区域
    context.clearRect(20, 20, 10, 10);
}

clearRect()用于清除画布上的矩形区域。

绘制路径

要绘制路径，首先必须调用==beginPath()方法==，表示要开始绘制新路径。

arc(x, y, radius, startAngle, endAngle, counterclockwise):
- (x, y)表示圆心，radius为半径
- counterclockwise表示startAngle和endAngle是否按逆时针方向计算，false表示顺时针
arcTo(x1, y1, x2, y2, radius)
bezierCurveTo(c1x, c1y, c2x, c2y, x, y):
- 从上一点开始绘制一条曲线，到(x, y)为止，并且以(c1x, c1y)和(c2x, c2y)为控制点
lineTo(x, y)
moveTo(x, y): 将绘图游标移动到(x, y)，==不画线==
quadraticCurveTo(cx, cy, x, y)
- 从上一点开始绘制一条二次曲线，并且以(cx, cy)作为控制点
rect(x, y, width, height)
- 该方法绘制的是==矩形路径==，并不是如上所示的独立的形状

创建路径之后

若连接到起点，调用closePath()
若要填充路径，fill()
stroke()对路径描边
clip()在路径上创建剪切区域

var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    
    context.beginPath();

    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.moveTo(100, 100);
    context.lineTo(100, 15);

    context.moveTo(100, 100);
    context.lineTo(35, 100);

    context.stroke();
}

绘制文本

主要有两个方法：fillText()和strokeText()。都可以接受4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。
以三个熟悉为基础：

font
textAlign：可能值有start、end、left、right、center。
textBaseline：文本的基线，可能值有top、hanging、middle、alphabetic、ideoraphic、bottom。

变换

修改变换矩阵的方法：

rotate(angle): 围绕原点旋转图像angle弧度
scale(scaleX, scaleY)：缩放图像
translate(x, y)：将坐标原点移动到(x, y)
transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改变换矩阵，方法是乘以矩阵：
1
2
3
m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy): 将变换矩阵重置为默认状态，然后再调用transform()

上述所有变换都会在当前上下文中一直有效，有两个方法可以跟踪上下文的状态变化：save()和restore()。save()将设置保存到栈结构中，restore()可以将其返回。

绘制图像

drawImage()

接受9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。

阴影

2D上下文会根据以下属性，自动为形状或路径绘制出阴影：

shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur

渐变

渐变由 CanvasGradient实例表示
createLinearGradient()创建线性渐变
- 接收4个参数：起点x坐标，起点y坐标，终点x左边，终点y坐标
createRadialGradient()创建径向渐变
- 接收6个参数：起点圆的(x, y)、半径和终点圆(x, y)和半径
创建渐变对象后，使用addColorStop()来指定色标，色标位置是一个0（开始颜色）到1（结束颜色）之间的数字

var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    
    var gradient = context.createLinearGradient(30, 30, 70, 70);
    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, "black");

    //绘制渐变矩形
    context.fillStyle = gradient;
    context.fillRect(30, 30, 50, 50);
}

使用图像数据

可以通过getImageData()取得原始图像数据。
接收四个参数：要取得数据区域的x、y、width、height

var imageData = context.getImageData(10, 10, 100, 100);
var data = imageData.data,
    red = data[0];
    green = data[1];
    blue = data[2];
    alpha = data[3];

每个ImageData对象都有三个属性：width、height和data，data是一个数组，保存着图像中==每一个像素的数据==。