scale(x,y)

x ：x坐标轴按 x 比例缩放

y ：x坐标轴按 y 比例缩放 旋转 rotate(angle)

angle ：坐标轴旋转x角度（角度变化模型和画圆的模型一样）

平移

translate(x,y)

x ：坐标原点向x轴方向平移x

y ：坐标原点向y轴方向平移y

平移，缩放，旋转先后顺序不同，坐标轴的变化图，图片来源于网络：

平移缩放旋转先后顺序不同坐标轴的变化图 图形组合

globalCompositeOperation=type

设置或返回新图像如何绘制到已有的图像上。最后的效果取决于 type 的值

type：

source-over（默认值）:在原有图形上绘制新图形

destination-over:在原有图形下绘制新图形

source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色

destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色

source-out:只显示新图形非交集部分

destination-out:只显示原有图形非交集部分

source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色

destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色

lighter:原有图形和新图形都显示，交集部分做颜色叠加

xor:重叠飞部分不现实

copy:只显示新图形

效果图如下，图片来源于网络

效果图 阴影 shadowOffsetX：设置或返回阴影距形状的水平距离（默认值为 0） shadowOffsetY：设置或返回阴影距形状的垂直距离（默认值为 0） shadowColor：设置或返回用于阴影的颜色 shadowBlur：设置或返回用于阴影的模糊级别（值越大越模糊）

例如：

context.fillStyle = 'white'; context.beginPath(); context.arc(100,100,10,0,2 * Math.PI); context.shadowColor = 'white'; context.shadowBlur = 10; context.fill(); context.closePath();

我们看到的效果就是我们在开头提起的例子中的 star 粒子的效果，因为其有白色阴影的效果，所以看起来像是发光一样，效果如下图：

带阴影效果的圆形 图像绘制

drawImage()
向画布上绘制图像、画布或视频

在画布上定位图像： context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度： context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img ：规定要使用的图像、画布或视频。

sx ：可选。开始剪切的 x 坐标位置。

sy ：可选。开始剪切的 y 坐标位置。

swidth ：可选。被剪切图像的宽度。

sheight ：可选。被剪切图像的高度。

x ：在画布上放置图像的 x 坐标位置。

y ：在画布上放置图像的 y 坐标位置。

width ：可选。要使用的图像的宽度。（伸展或缩小图像）

height ：可选。要使用的图像的高度。（伸展或缩小图像）

canvas绘制图形例子 图像平铺

createPattern(image,type)
type:

no-repeat:不平铺

repeat-x:横方向平铺

repeat-y:纵方向平铺

repeat:全方向平铺

图像裁剪

clip() 从原始画布剪切任意形状和尺寸的区域，需要先创建裁剪区域，再绘制图像；一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

例如：

// 设置剪切区域（粉色矩形） context.rect(0,0,500,400); context.fillStyle = "pink"; context.fill(); context.clip(); // 在剪切区域中绘制图形（白色矩形） context.fillStyle = "white"; context.fillRect(10,10,100,100); // 之后绘制的图形只能显示在剪切区域之内（红色矩形） context.fillStyle = "red"; context.fillRect(100,100,600,600)

效果如下：可以看到我们设置的红色矩形是一个 600 600 的矩形，但是显然是没有显示完的， *一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。

canvas进行图像剪切

所以说我们可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

代码如下：

context.save(); // 设置剪切区域 context.rect(0,0,500,400); context.fillStyle = "pink"; context.fill(); context.clip(); // 在剪切区域中绘制图形 context.fillStyle = "white"; context.fillRect(10,10,100,100); context.restore(); // 之后绘制的图形只能显示在剪切区域之内 context.fillStyle = "red"; context.fillRect(100,100,600,600)