书接上回
图片
所有的内容都是手动绘制还是有点麻烦，好在canvas支持导入图片，createPattern(image, type)，该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。
这里引一张我掘金的头像来做示例，要注意这里需要等待图片加载完之后再渲染
// 创建新 image 对象，用作图案 var img = new Image(); img.src = 'https://sf6-ttcdn-tos.pstatp.com/img/user-avatar/01434b575492b00010706d94d5b975aa~300x300.image'; img.onload = function() { // 创建图案 var p = ctx.createPattern(img, 'no-repeat'); ctx.fillStyle = p; ctx.fillRect(0, 0, 150, 150); } 复制代码
文本
图片都可以渲染那文本不也轻轻松松，canvas 提供了两种方法来渲染文本:
fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
根据API的语义就可以知道作用，stroke和fill就是我们前面用的描边和填充
文本可以设置字体等样式
font = value当前我们用来绘制文本的样式. 这个字符串使用和 CSSfont属性相同的语法. 默认的字体是10px sans-serif。textAlign = value文本对齐选项. 可选的值包括：start,end,left,rightorcenter. 默认值是start。textBaseline = value基线对齐选项. 可选的值包括：top,hanging,middle,alphabetic,ideographic,bottom。默认值是 `alphabetic。``- ``direction = value
文本方向。可能的值包括：ltr,rtl,inherit。默认值是inherit。`
这些跟css的样式是基本一致的
移动和缩放
既然canvas是为了解决动态图片的问题而设计的，那么移动和缩放可以说是动画的基础
移动很简单，使用translate(x, y)来控制移动，x和y分别就是x轴和y轴的偏移量；
旋转使用rotate(angle)，接受一个角度参数，沿顺时针方向，旋转点默认是（0，0）点，除非我们使用translate来移动它（比如直接ctx.translate(10, 10)即可）；
接下来是缩放，scale(x, y)，x和y分别是x轴和y轴方向的所当比例，1为不变，<1是缩小，反之放大；如果出现负数，就是按照所在的轴进行镜像翻转
如果你熟悉css的transform，那这里应该也很简单，他们很相似。
蒙版
关于蒙版内容，放个文档在这里吧，说起来太费劲了，如果你用过PhotoShop，你可能会比较好理解
动画
关于动画可以使用的方法有三种setTimeout、setInterval、requestAnimationFrame，前两个就是你熟悉的那两个定时器，requestAnimationFrame诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。
动画的大体过程如下：
- 清除上一帧，可以使用的方法很多，最简单的就是清空矩形，长宽为canvas的长宽
- 保存canvas状态（样式，变形之类的）,ctx.save()
- 绘制图形
- 恢复canvas状态,ctx.restore()
我们这里来做一个小的示例，矩形下落
ctx.beginPath(); let h = 0 function down() { h += 1 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, h, 100, 100) window.requestAnimationFrame(down) } down() 复制代码
效果如下
