上一篇文章讲解了如何使用js+ca??nvas实现粒子时钟。本文主要利用vue重构使其在vue中可用。我们重构一个简单的方法，不用vue项目，先添加vuecdn地址，如下：然后，重构时钟对象构造函数，改为传递画布，如下所示：functionClock(canvas){this.cxt=canvas.getContext('2d');this.cxt.fillStyle="#ddd";this.cxt.fillRect(0,0,500,100);这个.r=100/20-1;然后，创建一个vue对象实例并使用生命周期加载对其进行初始化，如下所示：=document.getElementById("canvas");canvas.width=600;canvas.height=100;varclock=newClock(canvas);setInterval(()=>{clock.getTime();})}})只是直接打开页面，如果你用的是vue项目，还行，这样就ok了。如有问题或需要资料，请进群交流：654979292
