位移

HTML5 Canvas 提供了 translate 方法，可重新映射画布上的 (0,0) 位置，再次绘制图形时，位置会相对新原点进行绘制，从而产生位移的效果。

相关方法：

// 重新映射画布上的 (0,0) 位置。
// x:添加到水平坐标（x）上的值
// y:添加到垂直坐标（y）上的值
context.translate(x, y);

HTML5 Canvas 提供的 clip 可将当前创建的路径设置为当前裁剪路径的方法。

绘制路径后裁切

裁切方法：

// 把已经创建的路径转换成裁剪路径
context.clip();

context.clip(fillRule);

context.clip(path, fillRule);

// 参数：
// fillRule：这个算法判断一个点是在路径内还是在路径外。
// 可选的值：
// "nonzero": 非零环绕原则，默认的原则。
// "evenodd": 奇偶环绕原则。
// path：需要剪切的 Path2D 路径。

HTML5 Canvas 提供了将图片绘制在画布上，它能够绘制图像的某些部分，以及增加或减少图像的尺寸。

绘图方式

// 在画布的(x, y)绘制图片
context.drawImage(img, x, y);

// 在画布的(x, y)绘制图片，并设置宽高
context.drawImage(img, x, y, width, height);

// 剪切图像，并在画布的(x, y)绘制图片
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

// 参数
// img:规定要使用的图像、画布或视频。
// sx:可选。开始剪切的 x 坐标位置。
// sy:可选。开始剪切的 y 坐标位置。
// swidth:可选。被剪切图像的宽度。
// sheight:可选。被剪切图像的高度。
// x:在画布上放置图像的 x 坐标位置。
// y:在画布上放置图像的 y 坐标位置。
// width:可选。要使用的图像的宽度。（伸展或缩小图像）
// height:可选。要使用的图像的高度。（伸展或缩小图像）

当我们使用 stroke 方法绘制出线条前，也可以通过一些方法来控制线条的样式。

具体设置参数：

// 设置或返回线条的结束端点样式
// butt:默认。向线条的每个末端添加平直的边缘。
// round:向线条的每个末端添加圆形线帽。
// square:向线条的每个末端添加正方形线帽。
context.lineCap="butt|round|square";

// 设置或返回两条线相交时，所创建的拐角类型
// bevel:创建斜角。
// round:创建圆角。
// miter:默认。创建尖角。
context.lineJoin="bevel|round|miter";

// 设置或返回当前的线条宽度
// number:当前线条的宽度，以像素计。
context.lineWidth=number;

// 设置或返回最大斜接长度
// number:正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
context.miterLimit=number;

通过创建一个gradient对象，在绘制图形前赋值于上下文（context）中，从而达到颜色渐变效果，渐变效果可用于填充矩形、圆形、线条、文本等等。

HTML5 Canvas 中的渐变分为线性渐变和径向渐变（也被称之为扩散性渐变）。相关方法：

// 创建线性渐变
// x0:渐变开始点的 x 坐标
// y0:渐变开始点的 y 坐标
// x1:渐变结束点的 x 坐标
// y1:渐变结束点的 y 坐标
context.createLinearGradient(x0,y0,x1,y1);

// 创建径向渐变
// 渐变的开始圆的 x 坐标
// 渐变的开始圆的 y 坐标
// 开始圆的半径
// 渐变的结束圆的 x 坐标
// 渐变的结束圆的 y 坐标
// 结束圆的半径
context.createRadialGradient(x0,y0,r0,x1,y1,r1);

// 增加规定渐变对象中的颜色和停止位置
// stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
// color:在结束位置显示的 css 颜色值
gradient.addColorStop(stop, color);

createLinearGradient 和 createRadialGradient 创建出的 gradient 对象必须使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。