javascript - 我可以为使用 javascript 在 Canvas 上绘制的路径提供一个类吗？

我使用 beginPath() 方法在 Canvas 上随机绘制小星星，如下所示:

function makeStars(){
  for(let i=0; i<100; i++){
    let startingX = Math.floor(Math.random()*canvasWidth);
    let startingY = Math.floor(Math.random()*canvasHeight);
    ctx.beginPath();
    ctx.moveTo(startingX, startingY);
    ctx.lineTo(startingX-3,startingY+9.4);
    ctx.lineTo(startingX+4.5, startingY+3.5);
    ctx.lineTo(startingX-4.5, startingY+3.4);
    ctx.lineTo(startingX+3, startingY+9.4);
    ctx.closePath();
    ctx.fill();
  }

是否可以为每条路径指定一个类？像 ctx.classList.add('star'); 之类的东西？最终，我希望能够使用 CSS 为它们制作动画。

谢谢!

编辑

看起来 CSS 不是正确的选择。我想我会尝试在 setInterval 循环中使用 javaScript 为我的星星制作动画。这是我正在使用的代码笔。 Twinkling Stars Canvas

最佳答案

不，CSS 无法制作动画或与 Canvas 绘图交互。

但是您可以创建一个 Star 类，它将提供更新、渲染和动画星星的 OOP 方式。

然后将所有星星插入数组中并在动画循环中更新/渲染它们。

https://codepen.io/anuraghazra/pen/WLLQJv

关于javascript - 我可以为使用 javascript 在 Canvas 上绘制的路径提供一个类吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53934998/