【canvas】3、使用图像、变形及裁切路径

图像

引入图像到 canvas 里的两步基本操作：
1、获得一个指向HTMLImageElement的对象或者另一个 canvas 元素的引用作为源
2、使用drawImage()函数将图片绘制到画布上

获得需要绘制的图片

HTMLImageElement
这些图片是由Image()函数构造出来的，或者任何的元素
HTMLVideoElement
用一个 HTML 的 元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
可以使用另一个 元素作为你的图片源。
ImageBitmap
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

获得与 canvas 相同页面内的图片的引用：

document.images集合
document.getElementsByTagName()方法
如果你知道你想使用的指定图片的 ID，你可以用document.getElementById()获得这个图片

绘制图片

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

缩放 Scaling

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

切片 Slicing

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

imageSmoothingEnabled属性来控制是否在缩放图像时使用平滑算法。默认值为true，即启用平滑缩放

变形

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

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

做变形之前先保存状态

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

2. 缩放 Scaling
   scale(x, y)
   scale 方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比 1 小，会缩小图形，如果比 1 大会放大图形。默认值为 1，为实际大小
   scale(1,-1); 以 y 轴作为对称轴镜像反转

3. 变形 Transforms
   transform(a, b, c, d, e, f)
   这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵，如下面的矩阵所示：[
   a c e
   b d f
   0 0 1
   ]

a (m11) 水平方向的缩放 b(m12) 竖直方向的倾斜偏移 c(m21) 水平方向的倾斜偏移 d(m22) 竖直方向的缩放 e(dx)
水平方向的移动 f(dy) 竖直方向的移动

setTransform(a, b, c, d, e, f)
这个方法会将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大

裁切路径

clip()
将当前正在构建的路径转换为当前的裁剪路径