于学习js是为爬虫服务，所以canvas绘图学习并不完整。

第15章 使用Canvas绘图

15.1 基本用法

HTML文件中需要有canvas元素，两标签之间的文字是浏览器不支持时显示的。

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

要在网页中显示canvas绘制的图像，只需要在画布上绘制图形即可：

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

if (drawing.getContext){
    var context = drawing.getContext("2d");

    context.fillStyle = "#0000ff";
    context.fillRect(10,10,50,50);

    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

也可以通过toDataURL输出到图像，并创建新的img：

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

// 取得图像的数据URI
var imgURI = drawing.toDataURL("image/png");
// 显示图像

var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);

15.2 2D上下文

15.2.1 填充和描边

可通过strokeStyle和fillStyle属性进行设置

var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";

设置属性有以下几种：

"red"
"#0000ff"
"rgba(0,0,255,0.5)"
context.strokeStyle = "red";

15.2.2 绘制矩形

绘制矩形有fillRect（带有填充）、strokeRect（无填充）、clearRect（除清矩形区域）三个方法，单位为像素：

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

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);
}

15.2.3 绘制路径

以beginPath()方法开始，然后接着绘制以下线条：

• arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示
• startAngle 和endAngle 是否按逆时针方向计算，值为false表示按顺时针方向计算。
• arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径radius 穿过(x1,y1)。
• bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
• lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。
• moveTo(x, y)：将绘图游标移动到(x,y)，不画线。
• quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。
• rect(x, y, width, height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由width 和height 指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。

路径创建完以后，有多种结尾方式：

• closePath()会自动与起点连接；
• fill()会自动以fillStyle填充区域；
• stroke()会对线条描边；
• clip()创建一个剪切区域。

15.2.4 绘制文本

方法：

fillText()
strokeText()

属性：

font
textAlign start、end、left、right、center
textBaseline top、hanging、middle、alphabetic、ideographic、bottom