使用图片

除了直接在 canvas 中绘制各种图形，快应用还支持使用图片。

图像对象

为了能够在 canvas 中使用图片，需要使用图像对象来加载图片。

const img = new Image() //新建图像对象

图片加载

修改图像对象的 src 属性，即可启动图片加载。

src 既可以使用 URI 来加载本地图片，也使用 URL 加载网络图片。

const img = new Image() //新建图像对象
img.src = '/common/logo.png' //加载本地图片
img.src = 'https://www.quickapp.cn/assets/images/home/logo.png' //加载网络图片
//加载成功的回调
img.onload = () => {
  console.log('图片加载完成')
}
//加载失败的回调
img.onerror = () => {
  console.log('图片加载失败')
}

绘制图片

图片加载成功之后，就可以使用 drawImage 在画布中进行图片绘制了。

为避免图片未加载完成或加载失败导致填充错误，建议在加载成功的回调中进行图片填充操作。

img.onload = () => {
  ctx.drawImage(img, 0, 0)
}

使用 drawImage 绘制图片也有 3 种不同的基本形式，通过不同的参数来控制。

基础

drawImage(image, x, y)

其中 image 是加载的图像对象，x 和 y 是其在目标 canvas 里的起始坐标。

这种方法会将图片原封不动的绘制在画布上，是最基本的绘制方法。

缩放

drawImage(image, x, y, width, height)

相对基础方法，多了两个 width、height 参数，指定了绘制的尺寸。

这种方法会将图片缩放成指定的尺寸后，绘制在画布上。

切片

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

其中 image 与基础方法一样，是加载的图像对象。

其它 8 个参数可以参照下方的图解，前 4 个是定义图源的切片位置和尺寸，后 4 个则是定义切片的目标绘制位置和尺寸。

在填充和描边绘制中使用图片

图片不仅仅可以直接绘制在画布中，还可以将图片像渐变色一样，作为绘制图形的样式，在填充和描边绘制中使用。

首先，需要通过 createPattern 创建图元对象，然后就可以将图元对象作为样式用在图形的绘制中了。

同样，为避免图片未加载完成或加载失败导致填充错误，建议在加载成功的回调中进行操作。

img.onload = () => {
  const imgPat = ctx.createPattern(img, 'repeat') //创建图元对象
  const p = Math.PI
  //填充绘制一个圆，使用图片作为填充元素
  ctx.beginPath()
  ctx.moveTo(50, 30)
  ctx.arc(100, 100, 60, 0, p * 2, false)
  ctx.fillStyle = imgPat
  ctx.fill()
  //描边绘制一个圆，使用图片作为描边元素
  ctx.moveTo(100, 30)
  ctx.beginPath()
  ctx.arc(250, 250, 50, 0, p * 2, false)
  ctx.strokeStyle = imgPat
  ctx.lineWidth = 30
  ctx.stroke()
}