vue 使用canvas画布

Vue.js 可以通过 canvas 标签来使用画布功能。下面是一个简单的例子：

1. 在 template 里面添加一个 canvas 标签

<template>
  <div>
    <canvas id="myCanvas"></canvas>
  </div>
</template>

1. 在 script 标签里面添加以下代码来获取 canvas 元素及其上下文对象

export default {
  name: 'MyComponent',
  mounted() {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    // 在这里使用画布上下文对象进行绘图操作
  }
}

1. 在上下文对象 ctx 上使用合适的方法进行绘图操作。下面是一个简单的例子：

ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();

上面的代码会在画布上绘制一条从点 (100, 100) 到点 (200, 200) 的红色直线。

更多关于 canvas 的绘图操作可以参考 Canvas 教程。