canvas mdn_Canvas绘图API（来自MDN）

1.绘图

绘制一个填充的矩形

绘制一个矩形的边框

清除指定矩形区域，让清除部分完全透明。

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

moveTo(x,y)

将笔触移动到指定的坐标x以及y上。

绘制一条从当前位置到指定x以及y位置的直线。

画一个以(x,y)为圆心的以radius为半径的圆弧(圆)，从startAngle开始到endAngle结束，按照anticlockwise给定的方向(默认为顺时针)来生成。

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

rect(x,y,width,height)

绘制一个左上角坐标为(x,y)，宽高为width以及height的矩形。

Path2D()会返回一个新初始化的Path2D对象(可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量)。

添加了一条路径到当前路径(可能添加了一个变换矩阵)。

示例：

var ctx = canvas.getContext('2d');

var rectangle = new Path2D();

rectangle.rect(10, 10, 50, 50);

var circle = new Path2D();

circle.moveTo(125, 35);

circle.arc(100, 35, 25, 0, 2 * Math.PI);

ctx.stroke(rectangle);

ctx.fill(circle);

2.图形样式

设置图形的填充颜色。

设置图形轮廓的颜色。

这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 (完全透明)到 1.0(完全不透明)，默认是 1.0。

线型

设置线条宽度。

设置线条末端样式。

butt，round 和 square。默认是 butt。

设定线条与线条间接合处的样式。

lineJoin 的属性值决定了图形中两线段连接处所显示的样子。它可以是这三种之一：round, bevel 和 miter。默认是 miter。

限制当两条线相交时交接处最大长度；所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。

返回一个包含当前虚线样式，长度为非负偶数的数组。

设置当前虚线样式。

设置虚线样式的起始偏移量。

想要获得精确的线条，必须对线条是如何描绘出来的有所理解。见下图，用网格来代表 canvas 的坐标格，每一格对应屏幕上一个像素点。在第一个图中，填充了 (2,1) 至 (5,5) 的矩形，整个区域的边界刚好落在像素边缘上，这样就可以得到的矩形有着清晰的边缘。

渐变

createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值(如 #FFF， rgba(0,0,0,1)，等等)。

图案样式

该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

阴影

shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

绘制文本

在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

当前我们用来绘制文本的样式. 这个字符串使用和CSSfont属性相同的语法. 默认的字体是 10px sans-serif。

文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

将返回一个TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。

3绘制图片

获得需要绘制的图片

canvas的API可以使用下面这些类型中的一种作为图片的源：

这些图片是由Image()函数构造出来的，或者任何的元素

用一个HTML的元素作为你的图片源，可以从视频中抓取当前帧作为一个图像

可以使用另一个元素作为你的图片源。

这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

生成图片元素

var img = new Image();  // 创建img元素

img.onload = function(){

// 执行drawImage语句

}

img.src = 'myImage.png'; // 设置图片源地址

绘制图片

drawImage(image, x, y)

其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小

第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

控制图像的缩放行为Controlling image scaling behavior

过度缩放图像可能会导致图像模糊或像素化。您可以通过使用绘图环境的imageSmoothingEnabled属性来控制是否在缩放图像时使用平滑算法。默认值为true，即启用平滑缩放。您也可以像这样禁用此功能：

ctx.mozImageSmoothingEnabled = false;

ctx.webkitImageSmoothingEnabled = false;

ctx.msImageSmoothingEnabled = false;

ctx.imageSmoothingEnabled = false;

4.canvas的状态

保存画布(canvas)的所有状态

save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

5.平移，旋转，缩放

我们先介绍 translate 方法，它用来移动 canvas 和它的原点到一个不同的位置。

translate(x, y)

translate 方法接受两个参数。x是左右偏移量，y是上下偏移量，如右图所示。

第二个介绍 rotate 方法，它用于以原点为中心旋转 canvas。

rotate(angle)

这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。

接着是缩放。我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。

scale(x, y)

scale  方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比1小，会缩小图形， 如果比1大会放大图形。默认值为1， 为实际大小。

最后一个方法允许对变形矩阵直接修改。

这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵，如下面的矩阵所示：

\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

如果任意一个参数是Infinity，变形矩阵也必须被标记为无限大，否则会抛出异常。

这个函数的参数各自代表如下：

a (m11)

水平方向的缩放

b(m12)

竖直方向的倾斜偏移

c(m21)

水平方向的倾斜偏移

d(m22)

竖直方向的缩放

e(dx)

水平方向的移动

f(dy)

竖直方向的移动

这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。从根本上来说，该方法是取消了当前变形,然后设置为指定的变形,一步完成。

重置当前变形为单位矩阵，它和调用以下语句是一样的：ctx.setTransform(1, 0, 0, 1, 0, 0);

我们不仅可以在已有图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分(清除区域不仅限于矩形，像clearRect()方法做的那样)以及更多其他操作。

这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。

裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏不需要的部分。如右图所示。红边五角星就是裁切路径，所有在路径以外的部分都不会在 canvas 上绘制出来。

如果和上面介绍的 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。

在绘制图形一章中，我只介绍了 stroke 和 fill 方法，这里介绍第三个方法clip。

将当前正在构建的路径转换为当前的裁剪路径。

我们使用 clip()方法来创建一个新的裁切路径。

默认情况下，canvas 有一个与它自身一样大的裁切路径(也就是没有裁切效果)。

6.动画

你可以通过以下的步骤来画出一帧:

清空canvas

除非接下来要画的内容会完全充满 canvas (例如背景图)，否则你需要清空所有。最简单的做法就是用 clearRect 方法。

保存canvas状态

如果你要改变一些会改变 canvas 状态的设置(样式，变形之类的)，又要在每画一帧之时都是原始状态的话，你需要先保存一下。

绘制动画图形(animated shapes)

这一步才是重绘动画帧。

恢复canvas状态

如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。

当设定好间隔时间后，function会定期执行。

在设定好的时间之后执行函数

告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。

7.像素操作

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：

width

图片宽度，单位是像素

height

图片高度，单位是像素

data

Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间(包括255)。

保存图片

HTMLCanvasElement提供一个toDataURL()方法，此方法在保存图片的时候非常有用。它返回一个包含被类型参数规定的图像表现格式的数据链接。返回的图片分辨率是96dpi。

默认设定。创建一个PNG图片。

Default setting. Creates a PNG image.

创建一个JPG图片。你可以有选择地提供从0到1的品质量，1表示最好品质，0基本不被辨析但有比较小的文件大小。

当你从画布中生成了一个数据链接，例如，你可以将它用于任何元素，或者将它放在一个有download属性的超链接里用于保存到本地。

你也可以从画布中创建一个Blob对像。

这个创建了一个在画布中的代表图片的Blob对像。

8.canvas的交互

以下API已废弃，Chrome不可用，不建议使用。

判断鼠标坐标是否在canvas上一个特定区域里一直是个有待解决的问题。hit region API让你可以在canvas上定义一个区域，这让无障碍工具获取canvas上的交互内容成为可能。它能让你更容易地进行点击检测并把事件转发到DOM元素去。这个API有以下三个方法(都是实验性特性，请先在浏览器兼容表上确认再使用)。

在canvas上添加一个点击区域。

从canvas上移除指定id的点击区域。

移除canvas上的所有点击区域。