Vue-画布动画的常见做法是什么

Question

我想知道我的方法是否是在Vue.js 中绘制画布动画的好方法

它有效，但我不确定我做得对不对。

由于我使用JavaScriptClass制作Canvas的圆形数组，因此我为其制作了一个单独的javascript文件并导入。(必须将2d上下文传递给类(

方法如下。

Canvas.vue

<template>
<div>
<canvas id='myCanvas' width='500' height='500'></canvas>
</div>
</template>
<script>
import Circle from './canvasClass/Circle.js';
export default {
data(){
return {
canvas:null,
x:null,
y:null,
circleArr:[]
}
},
mounted(){
let canvas = document.querySelector('#myCanvas');
this.canvas = canvas.getContext('2d');
},
created(){
window.addEventListener('click',this.createCircle)
this.draw()
},
unmounted() {
window.removeEventListener('click', this.createCircle) 
},
methods:{
createCircle(e){
this.circleArr.push(
new Circle(e.offsetX,e.offsetY,this.canvas)
)
},
draw(){
window.requestAnimationFrame(this.draw);
this.circleArr.forEach((d)=>{
d.animate()
})
}
}
}
</script>

circle类的单独javscript文件是

export default class Circle {
constructor(xpos, ypos, context) {
this.xpos = xpos;
this.ypos = ypos;
this.context = context;
}
draw() {
this.context.beginPath();
this.context.arc(this.xpos, this.ypos, 10, 0, Math.PI * 2);
this.context.stroke();
}
move() {
this.xpos += 0.5;
this.ypos += 0.5
}
animate() {
this.draw()
this.move()
}
}

有人能告诉我我的方法是否是在Vue中绘制画布动画的好方法吗？如果这不是一个好办法，有人能给我一个更好的建议吗？

谢谢

Answer 1

是。你走的路是对的。

以下是更有用的npm模块，尽管

Vue Konva