JS Canvas

JavaScript

创建一个html canvas 元素（画布）：

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

getContext()

要在画布上绘图，需要取得上下文：

var drawing = document.getElementById('drawing');
//用 getContext('2d') 获取2d上下图
var context = drawing.getContext('2d');

该方法也是判断是否支持 canvas 元素的标准：

var hasCanvas = document.createElement('canvas').getContext? true : false;

toDataUrl()

获取 canvas 上的图像（路径），参数为图像的格式，image/png（默认） 或 image/jpeg，第二个可为品质：

//获取路径
var imgUrl1 = drawing1.toDataUrl('image/png');
var imgUrl2 = drawing2.toDataUrl('image/jpeg', 0.8);
//显示图像
var image = document.createElement('img');
image.src = imgUrl1;
document.body.appendChild(image);

2D上下文

填充和描边

原点位于左上角，大多2D上下文操作分为 填充 和 描边 ，取决于两个属性：fillStyle 和 strokeStyle。两个属性的值可以为字符串、渐变对象或模式对象，默认值为 #000000。例子：

var drawing = document.getElementById('drawing');
var context = drawing.getContext('2d');
//描边
context.strokeStyle = 'red';
//填充
context.fillStyle = '#0000ff';

绘制矩形

与矩形有关的方法有 fillRect()、strokeRect()、clearRect()。
都接收4个参数（指定某个矩形）：矩形的x坐标、y坐标（左上定点）、宽度、高度。单位为px。

首先，fillRect 方法绘制的矩形会填充颜色，由 fillStyle 指定：

var context = drawing.getContext('2d');
//red rectangle
context.fillStyle = '#ff0000';
context.fillRect(10, 10, 50, 50);
//with opacity
context.fillStyle = 'rgba(0, 0, 255, 0.5)';
context.fillRect(100, 100, 60, 60,);

换颜色需要重新指定 fillStyle，否则不用。

strokeStyle 则对应 strokeRect() 的描边颜色。

描边的宽度由 lineWidth 属性控制，可以是任意整数。lineCap 属性可以控制线条末端是 butt、round 或 square

claerRect()清除指定矩形区域内的矩形填充（有的话）

绘制路径

beginPath()

调用该方法表示要开始绘制新路径。

• arc(x, y, radius, startAngle, endAngle, couterclockwise)：以 (x, y) 为圆心绘制一条特定半径，起始和结束角度（弧度制），最后一个参数表明是否逆时针。
• arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条指定半径且过 (x1, y1) 的曲线，到 (x2, y2) 为止。
• bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点绘制一条到(x, y)结束，以(c1x, x1y)、(c2x, c2y)为控制点的贝塞尔曲线。
• lineTo(x, y)：从上一点绘制到(x, y)的直线。
• moveTo(x, y)：游标移动到(x, y)。
• quadraticCurveTo(cx, cy, x, y)：从上一点绘制以(cx, cy)为控制点，到(x, y)的二次贝塞尔曲线。
• rect(x, y, width, height)：绘制矩形路径。
• closePath()：连接起点。
• fill()：以当前 fillStyle 颜色填充路径内区域。
• stroke()：以当前 strokeStyle 颜色描边路径。
• clip()：在路径上剪切一块区域。
• isPointInPath(x, y)：返回某点是否在路径上的布尔值。

所有路径绘制好后调用一次 stroke()就行。

绘制文本

fillText() 和 strokeText()可以绘制（实心/空心）文本。接收4个参数——要绘制的文本字符串、x坐标、y坐标、最大像素宽度（可选）。
文本样式通过3个属性设置：
- font：文本大小（px）和字体，如：'10px serif'。
- textAlign：文本对齐方式，如：'start'、'end'、'left'、'right'、'center'。
- textBaseline：表示文本的基线，如：'top'、'hanging'、'middle'、'alphabetic'、'ideographic'、'bottom'。

变换

• rotate(angle)：围绕原点将图像旋转特定角度。
• scale(scaleX, scaleY)：在x和y方向进行缩放，scaleX 和 scaleY 默认值为1.0。
• translate(x, y)：将原点移动到(x, y)。