Vue.js 可以通过 canvas 标签来使用画布功能。下面是一个简单的例子：
- 在
template里面添加一个canvas标签
<template> <div> <canvas id="myCanvas"></canvas> </div> </template>
- 在
script标签里面添加以下代码来获取canvas元素及其上下文对象
export default { name: 'MyComponent', mounted() { const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 在这里使用画布上下文对象进行绘图操作 } }
- 在上下文对象
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 教程。
