问题：在canvas上面绘制图像
期望效果：
解决步骤：
<div class="box">
<!-- 当没有设置宽和高时，canvas初始化宽为300，高为150像素 -->
<canvas ref="canvas" width="600" height="400"></canvas>
</div>
// 创建一个<img>元素
const img = new Image();
// 用 load 事件来保证不会在加载完毕之前使用这个图片
img.onload = () => {
// 获取图片的宽度和高度
const { width, height } = img;
// 获取canvas对象，通过 getContext() 方法来获得渲染上下文和它的绘画功能
const ctx = this.$refs.canvas.getContext('2d');
// 使用 drawImage 方法将它渲染到 canvas 里
// width 和 height，这两个参数用来控制 当向 canvas 画入时应该缩放的大小
ctx.drawImage(img, x, y, width, height);
};
// 设置图片源地址
img.src = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
},
具体内容：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images
