前端学习日志1019

Canvas画布

线条绘制

最简单的莫过于直线，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 .