canvas深入浅出（三）| 小册免费学

书接上回

图片

所有的内容都是手动绘制还是有点麻烦，好在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当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
• textAlign = value文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 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()

效果如下

那么关于canvas的API我们也已经了解的差不多了，下一节，我们来实现一个五子棋的小游戏

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情