HTML5 Canvas 学习

画布是H5中一个重要的概念，它面向开发人员提供了非常底层的绘图接口，使得绘制速度可以大幅提高，这对游戏等领域极为重要。

为初始化一个画布，使用canvas标签声明相应的画布元素，使用canvas.getContext('2d')可以获得二维的图形操作上下文，这样就可以开始操纵画布了。

线条绘制

最简单的莫过于直线，canvas提供了lineTo这样的接口：

context.beginPath();        // 声明创建新的path
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 3;        // 设置直线的宽度，需要先于stroke的调用
context.strokeStyle = '#ff0000';    // 设置线条的颜色 ，需要先于stroke的调用
context.lineCap = 'round';        // 设置圆角样式
context.stroke();    // 真正使得直线可见

接下来是曲线，canvas提供了arc这个接口：

// 幅度制
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

当然，arc提供的圆的曲线，为了使得曲线能够更加地自由和随意，可以使用 quadraticCurveTo方法。具体来说，首先使用moveTo设置好起点，然后向quadraticCurveTo传入参数（控制点、终止点坐标），即：

context.moveTo(100, 100);    // 起始点
context.quadraticCurveTo(200, 200, 300, 100);    // 控制点和终止点

另外，canvas还提供了一个bezierCurveTo的方法，以提供更加灵活的曲线绘制，它的接口更加地灵活，接受多个控制点作为参数。

组合上面提供的直线、二次曲线、Bezier曲线，就可以提供一个非常复杂的曲线绘制了。

形状绘制

我们可以使用lineTo、arcTo、quadraticCurveTo和bezierCurveTo等绘制线条，再使用context.closePath来闭合曲线，形成一个完整的形状。当然，它也提供了一些基础形状绘制的API，如rect就是用于绘制四边形。为绘制一个圆形，可以使用context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);进行。而半圆的话，就是将里面的参数减半再闭合路径即可。

context.beginPath();
context.moveTo(0, 0);
context.lineTo(30, 30);
context.lineTo(10, 60);
context.closePath();
context.stroke();

我们可以给形状填充颜色，这通过设置上下文的fillStyle属性即可。举个例子，我们需要对一个矩形填充绿色，可以使用：

context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'green';
context.fill();

当然，我们也可以填充其它更加丰富的内容，如我们可以填充 Linear Gradient 或 Radial Gradient 类型的颜色，这也是通过设置fillStyle达到的：

var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);  
// var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);    // 也可以换成 Radial Gradient

grd.addColorStop(0, '#8ED6FF');  
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;    // 设置fillStyle
context.fill();

另外，我们也可以使用图片对形状进行纹理贴图，这一点称为 Pattern，通过调用context.createPattern(imageObj, 'repeat');达到：

var img = new Image();
img.src = "./img.jpg";
img.onload = function () {
    var pattern = context.createPattern(img, 'repeat');    // 后一个参数各类：repeat, repeat-x, repeat-y, no-repeat
    context.fillStyle = pattern;
    context.fill();
}

图像文本操作

drawImage这个方法可以给我们提供在画布上直接绘制图像的能力，一般情况下，我们需要等到图像完全加载完以后才能调用drawImage，drawImage的接口包含图像、绘制坐标、图像大小（可选）：

var img = new Image();
img.src = "./img.png";
img.onload = function () {
     context.drawImage(img, 10, 10, 200, 200);    // 在画布坐标（10，10）处开始绘制大小为200 * 200的图像  
}

但有时候，我们可能只需要截取图像中的一部分内容绘制到画布上，drawImage也是支持这种样式的。其调用接口为：

// 其中(srcX, srcY)表示图像的左上角开始的坐标进行裁剪，大小为srcWidth * srcHeight，并绘制到画布(dstX, dstY)坐标上
context.drawImage(img, srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight);

有时候，我们还需要对图像本身作一定的处理（即基于像素级别的图像处理），可以使用context.getImageData(imageX, imageY, imageWidth, imageHeight);获得感兴趣的部分的图像数据，它返回的是ImageData对象。

// 调用drawImage之后，再调用下面的代码
var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
var data = imageData.data;
// iterate over all pixels
for(var i = 0, n = data.length; i < n; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      // red
      data[i] = brightness;
      // green
      data[i + 1] = brightness;
      // blue
      data[i + 2] = brightness;
} 
context.putImageData(imageData, imageX, imageY, imageWidth, imageHeight);  
// 我们需要对data[i], data[i+1]等数据直接赋值，然后context.drawImage(imageData)即可。

获得像素数据后，我们就可以对图像进行处理了，之后重新调用context.drawImage就好了。HTML5Rocks上提供了一个基于canvas的强大图像处理的简单代码。关于ImageData的具体细节，可以参考MDN上的说明。

canvas还具有绘制文本的能力，fillText方法可以向画布上绘制文字，而context.font用于设置文本的字体。 前面提到 fillStyle用于 填充形状颜色，它也可以用于设置文本的颜色。

context.font = 'italic 40pt Arial';
context.fillStyle = 'red';
context.fillText('Hello World!', 150, 100);

如果我们希望显示文本的边界，这时strokeText就非常地实用。

context.font = '60pt Calibri';
context.lineWidth = 3;
context.strokeStyle = 'blue'; 
context.strokeText("ABCDEFG", 100, 100);

如果希望文本既显示实体内容，也显示边界，那么fillText和strokeText都需要调用。

context.font = '60pt Calibri';
context.lineWidth = 3;
// stroke color
context.fillText("Hello World!", x, y);
context.strokeStyle = 'blue';
context.strokeText('Hello World!', x, y);

TODO： 可以使用textAlign设置文本的水平对齐方式，使用textBaseline设置文本的垂直对齐方式。

// start ,  end ,  left , center , or  right . 

几何变换

canvas现在被大量地运用于游戏等动画领域，最主要的归功于它提供的一系列几何变换方法，使得动画更加地容易。所以其几何变换是非常重要的一节。

几何变换一般包括：旋转（rotate）、平移（translate）、缩放（scale），为支持任意的变换，canvas也提供了transform这个方法 。本质上，它会先对context进行几何变换，然后再绘制。

context.translate(x, y)
context.scale(1, 1.2);
context.rotate(Math.PI / 4);    // 以原点开始逆时针旋转
context.transform(a, b, c, d, e, f);
// 参数对应于如下矩阵
// a c e
// b d f
// 0 0 1  

但有时候，我们可能希望对不同几何体应用不同变换，这时就需要重置之前的变换矩阵，通过向setTransform这个方法传入一个单位矩阵即可实现这个目的。但是，从另一个角度上来说，每次这样重置是很繁琐的，所以canvas还提供了一个save和restore方法对变换状态进行管理。事实上，这和OpenGL通过pushMatrix()和popMatrix();来实现对矩阵状态栈的保存与加载是一致的。以下是一个完整的实例：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 150;
var rectHeight = 75;

context.save();        // 保存当前变换矩阵I，在此基础上作后续变换，即I * T
// save state 1
context.translate(canvas.width / 2, canvas.height / 2);

context.save();        // 在前一个translate的矩阵基础上进行后续变换，即 I * T * R
// save state 2
context.rotate(Math.PI / 4);

context.save();    //     I * T * R * S
// save state 3
context.scale(2, 2);

context.fillStyle = 'blue';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

context.restore();    // 弹出S，即I * T * R
// restore state 3
context.fillStyle = 'red';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

context.restore();
// restore state 2
context.fillStyle = 'yellow';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

context.restore();
// restore state 1
context.fillStyle = 'green';
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

说明

• https://coderwall.com/p/pa-2uw/using-external-images-with-canvas-getimagedata-and-todataurl： 由于drawImage的时候引用的是一个img对象，默认情况下我们只能对本域内图像文件进行操作，为了达到 cross domain 的目的，可以将img的crossOrigin属性设置为空字符串。
• Canvas cheat sheet