使用 Canvas 绘图

JavaScript

基本用法

首先需要在文档中创建<canvas>元素，并且指定高度和宽度。

<canvas id="drawing" width="200" height="200">不支持 Canvas 时的替代信息</canvas>

要在画布上绘图，需要取得绘图上下文，调用 getContext()方法并传入上下文名字就可以取得绘图上下文。传入"2d"就可以取得2D 上下文对象。
在使用<canvas>元素之前需要先检测浏览器是否支持 getContext()方法。
使用 toDataURL()方法可以导出在<canvas>元素上绘制的图像，这个方法接受一个参数，图像的 MIME 类型格式。返回该图像的 URL。

2D 上下文

填充和描边

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

以上代码设置了图像的填充样式和描边样式，之后的描边以及填充操作都将使用这两个样式。

绘制矩形

• fillRect()：填充矩形区域。
• strokeRect()：描边矩形区域。
• clearRect()：清楚矩形区域。
  以上三个方法都接受四个参数，矩形的 x坐标、矩形 y坐标、矩形的宽度、矩形的高度。

绘制路径

首先使用 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()方法、stroke()方法或者是 clip()方法，这个方法创建一个剪切区域。

context.beginPath();
context.arc(340, 170, 85, Math.PI, Math.PI*3/2, false);
context.arc(255, 92, 85, 0, Math.PI/2, false);
context.closePath();
context.fill();

需要清除路径需要先创建剪切区域，然后对整张画布 clearRect()。

绘制文本

绘制文本有两个方法，fillText()和 strokeText()，这两个方法都接受4个参数，要绘制的文本字符串，x 坐标，y 坐标和可选的最大像素宽度。绘制文本有3个属性。

• font：表示文本样式、大小及字体，同 CSS 中font 样式。
• textAlign：表示文本的对齐方式，"start"表示指定的 x坐标为文本的左端，"end"表示指定的 x坐标为文本的右端。"center"表示指定的 x坐标为文本的中间。
• textBaseline：表示文本的基线，可能的值为"top"以顶端为基线、"hanging"基线为悬挂基线(印度文)、"middle"以正中间为基线、"alphabetic"基线为字母基线(四线三格中的第三条线)、"ideographic"基线为表意基线(中文)和"bottom"以底部为基线。

当文本超过最大像素时，文本的高度不会发生变化，但是宽度会被压缩。
measureText()方法接受一个参数，即要绘制的文本，返回一个对象，这个对象目前只有 width 一个属性。通过这个方法可以很好地控制文本的大小，避免上述情况的出现。

变换

可以通过如下方法来修改上下文的变换矩阵。rotate()、scale()、translate()（移动坐标原点）、transform()、setTransform()（重置矩阵）。
矩阵的使用方法
save()方法可以将目前的变换状态保存到栈结构中，可以连续保存。调用 restore()方法可以返回上次保存的变换状态，可以连续返回。

绘制图像

可以通过 drawImage()方法将图像传入到画布中。这个方法接受三个参数，要绘制的<img>元素，绘制起点的 x坐标和 y坐标。

var image = document.images[0];
context.drawImage(image, 10, 10);

如果想要改变图像大小可以再传入两个参数，图像的宽度和高度。

context.drawImage(image, 10, 10, 20, 30);

如果想传入图像中的某个区域可以再传入四个参数，区域的 x坐标和 y坐标，区域的宽度和高度。

context.drawImage(image, 10, 10, 20, 30, 0, 100, 40, 60)

修改的结果可以通过 toDataURL()方法获得，不过图像不能够来自于其他域，否则就会报错。

阴影

2D 上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur

渐变

creatRectLinearGradient()方法接受4个参数：起点的 x坐标和 y坐标、终点的 x坐标和 y坐标。这个对象会返回一个对象，可以通过这个对象来设置渐变的颜色。
这个对象拥有 addColorStop()方法，这个方法可以创建一个渐变的关键点。这个方法接受2个参数，色标位置和颜色，色标位置为一个0（开始）到1（结束）之间的数字。
设置完成之后就可以应用这个对象了，不过要注意的是这个对象的坐标表示的是相对于画布的坐标，因此需要将坐标调整到响应形状的位置，否则就无法完全显示渐变效果。

var gradient = context.creatRectLinearGradient(30, 30, 70, 70)
gradient.addColorStop(0, "#FFF");
gradient.addColorStop(1, "#000");
context.fillStyle = gradient;
context.fillRect(30, 30, 70, 70);

模式

也可以用重复的<img>元素、<video>元素和<canvas>元素来填充或者描边图形。createPattern()方法接受两个参数，一个 HTML<img>元素和一个表示如何重复的字符串(同 CSS 中的 background-repeat 样式)。

var image = document.images[0];
var pattern = context.createPattern(image, "repeat");

使用图像数据

2D 上下文可以通过 getImageData()方法取得图像原始数据，这个方法接受4个参数，要取得的区域的 x坐标和 y坐标、区域的宽度和高度。返回一个 ImageData 对象，这个对象保存着图像中每一像素的数据。在 data 数组中每一个像素用四个元素表示，这四个元素分别表示红、绿、蓝和透明度。也可以通过操作这些数据来对图像进行修改。

合成

globalAlpha 属性是一个介于0到1的值，表示全局透明度。
alobalCompositionOperation 属性是一个字符串，表示后绘制的图形如与先绘制的图形结合。可能的值有

• source-over：后者在前者之上。（默认值）
• source-in：后者中与前者重叠的部分可见，两者其余部分透明。
• source-out：前者完全透明，后者中与前者不重叠的部分可见。
• source-atop：后者中与前者重叠部分可见，前者不受影响。
• destination-over/in/out/atop：同 source，但是后者位于前者下方。
• lighter：两者重叠部分进行加色操作。
• darker：两者重叠部分进行减色操作。
• copy：后者完全替代前者。
• xor：对重叠部分执行"异或"操作，重叠部分不可见。

WebGL

WebGL 是针对 Canvas 的3D 上下文。