Vue实现画布
Vue实现画布的基础方法
在Vue中实现画布功能通常通过HTML5的<canvas>元素结合Vue的响应式特性完成。以下是基础实现步骤：
安装Vue（若未初始化项目）
通过npm init vue@latest创建项目，或直接在现有项目中引入Vue。
引入Canvas元素
在Vue组件的模板中添加<canvas>标签，并设置ref以便操作：
<template>
<canvas ref="myCanvas" width="500" height="300"></canvas>
</template>获取Canvas上下文
在mounted生命周期中获取Canvas的2D渲染上下文：
<script>
export default {
mounted() {
const canvas = this.$refs.myCanvas;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
}
}
</script>动态绘制与响应式更新
结合Vue的数据绑定实现动态绘图：
声明响应式数据
使用data或ref（Composition API）存储绘图参数：
data() {
return {
rectX: 10,
rectY: 10
}
}监听数据变化
通过watch或计算属性更新画布：
watch: {
rectX(newVal) {
const ctx = this.$refs.myCanvas.getContext('2d');
ctx.clearRect(0, 0, 500, 300);
ctx.fillRect(newVal, this.rectY, 100, 100);
}
}实现交互式画布
添加事件监听实现用户交互：
绑定鼠标事件
在Canvas上监听鼠标动作：
<canvas
ref="myCanvas"
@mousedown="startDrawing"
@mousemove="draw"
@mouseup="stopDrawing"
></canvas>处理绘图逻辑
记录绘图状态和路径：
methods: {
startDrawing(e) {
this.isDrawing = true;
const { offsetX, offsetY } = e;
this.lastX = offsetX;
this.lastY = offsetY;
},
draw(e) {
if (!this.isDrawing) return;
const ctx = this.$refs.myCanvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(this.lastX, this.lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
this.lastX = e.offsetX;
this.lastY = e.offsetY;
}
}使用第三方库优化
对于复杂场景，可集成专业库：
安装fabric.js
npm install fabric在Vue中初始化fabric
import { fabric } from 'fabric';
export default {
mounted() {
const canvas = new fabric.Canvas(this.$refs.myCanvas);
const rect = new fabric.Rect({
left: 100,
top: 100,
width: 60,
height: 70,
fill: 'red'
});
canvas.add(rect);
}
}性能优化技巧
离屏Canvas预处理
复杂图形可先在内存中绘制：
const offscreen = document.createElement('canvas');
const offCtx = offscreen.getContext('2d');
offscreen.width = 500;
offscreen.height = 300;
offCtx.drawComplexShape(); // 复杂操作
// 主Canvas直接绘制结果
ctx.drawImage(offscreen, 0, 0);防抖重绘机制
频繁更新时限制重绘频率：
let redrawTimer;
watch: {
data() {
clearTimeout(redrawTimer);
redrawTimer = setTimeout(() => this.redraw(), 50);
}
}
