基于vue的拼图小游戏制作完成，在编写的途中遇到许多知识点和问题，在最后做一个总结避免忘记

使用canvas时，刷新页面有时会显示不出图片

原因：img标签尚未加载完成，使用img的onload事件即可

imgBase.onload = () => {
	canvas.drawImage(imgBase, 0, 0, width, width, 0, 0, 300, 300);
	...
}

优化canvas频繁读取

在获取getContext时添加参数willReadFrequently，可以优化后续读取操作。详见文档

document.getElementById('imageFac').getContext('2d', { willReadFrequently: true });

获取图片实际宽高

绘制图片时我们需要根据图片的实际宽高完全绘制到canvas上，所有需要获取图片的实际宽高。这里借助另一个image元素，当不给img设置宽高是默认为原始图片宽高，利用这点就可以获取到图片实际宽高。需要注意的是宽高需要在图片加载完成后的onload事件中获取。

getImgWidth (imgSrc) {
  var image = new Image();
  image.src = imgSrc;
  return new Promise((resolve, reject) => {
    image.onload = () => {
      resolve(image.width)
    }
    image.onerror = function () {
      reject(0);
    };
  })
}
// 获取宽度
(async () => {
  let width = await this.getImgWidth('')
})()