Javascript 我可以在按钮后面设置画布动画并绘制像素吗？

我想创建一个HTML按钮，将动画一些1至2像素的正方形。我在Ruby（Ruby2D）中也做过类似的事情：

[]

由于我对HTML缺乏了解，我只创建了以下按钮：

纽扣粒子
//将班级中心img的元素定位到屏幕中心
var centereelements=document.getElementsByClassName（'center-img'）
for（设i=0；i

要设置粒子的动画，首先需要创建画布。这是对代码的大量修改。为了创建相同的效果，下面是我编写的示例代码

代码

//将类中心img的元素定位到屏幕中心
var centereelements=document.getElementsByClassName（'center-img'）
for（设i=0；i{
ctxBG.clearRect（0，0，canvasBG.width，canvasBG.width）
对于（设i=0；i<250；++i）{
var bS=bgStars[i]
ctxBG.fillStyle=`rgba（${bS.r}，${bS.g}，${bS.b}，${Math.random（）>0.05？1:0}）`
ctxBG.fillRect（bS.x、bS.y、bS.size、bS.size）
}
}，fPS*20）
}
//在按钮上绘制粒子
var canvas=document.getElementById（'starfield'）
canvas.width=window.innerWidth
canvas.height=window.innerHeight
var btn=document.getElementById（'btn'）
var btnRect=btn.getBoundingClientRect（），btnTouched=false
btn.onmouseover=（）=>{btntooched=true}
btn.onmouseout=（）=>{btntooched=false}
函数appendStars（）{
for（设i=0；i{
canvas.width=window.innerWidth
canvas.height=window.innerHeight
btnRect=document.getElementById（'btn'）.getBoundingClientRect（）
drawBG（）
()
}
设置间隔（（）=>{
var ctx=canvas.getContext（'2d'）
ctx.clearRect（0,0，canvas.width，canvas.height）
for（设i=0；ibtnRect.right | | star.ybtnRect.bottom）
星形。不透明度-=褪色
if（star.x>canvas.width | | star.x<-star.size | | star.y>canvas.height | | star.y<-star.size）{
var randSize=Math.random（）*2+1
星星[我]=新星(
btnRect.x+btnRect.width/2-randSize/2，
b校正y+b校正高度/2-随机尺寸/2，
randSize，b未触及？1:0
)
}
ctx.fillStyle=`rgba（${star.r}，${star.g}，${star.b}，${star.opacity}）`
ctx.fillRect（star.x，star.y，star.size，star.size）
}
}，fPS）

纽扣粒子

我几天前发布了这个问题，并收到了一些反对票。因为这是一件非常基本的事情，我自己写了答案，希望它能帮助其他人。。。