我可以给用javascript在画布上绘制的路径指定一个类吗？

我使用beginPath（）方法在画布上随机绘制小星星，如下所示：

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();
  }

函数makeStars（）{
对于（让i=0；i来说，简短的回答是：不，CSS不会作用于画布上绘制的元素

在画布上画画就像直接在纸上画画。你使用的是2D上下文来操作笔。虽然你可以找到一种方法来阅读CSS并执行动画（通过重新绘制画布），但我认为这比任何其他方法都要困难

如果您打算使用CSS，一种替代方法是使用。
SVG
中的元素可以对您的
CSS
做出反应，就像
HTML
元素一样

如果必须使用画布，也可以将SVG绘制到画布上，然后将该URI加载到
图像
对象中，然后
将图像
放到画布上。您必须弄清楚如何在每次
SVG
更新时绘制，或者每隔一段时间轮询新的
SVG
信息（如
requestAnimationFrame
）。
否，CSS无法设置动画或与画布绘图交互

但是您可以创建一个
Star
类，该类将提供更新、渲染和设置星星动画的OOP方法

然后推动阵列中的所有星星，并在动画循环中更新/渲染它们

如果他们已经有了SVG图像，他们就不需要画布，所以你的最后一段有点奇怪。@Mike'Pomax'Kamermans哦，我同意。这就是为什么我在开头提到需要使用
canvas
。画布可能还涉及到绘制其他东西。当然，你可以用另一种方式将元素插入
SVG
>，比如使用
foreignObject
直接注入
画布
，但我在问题的另一方面犯了错误，因为我想直接在画布上绘制星星的动画。嗯，好吧，我想我明白了。我实际上没有SVG图像，我知道“我只是直接在画布上画画。我不打算使用CSS，所以也许我会尝试用javaScript制作动画。如果我只是在setInterval（）上重新绘制画布会怎么样？”。更改我的星星的大小或不透明度。这是一种合理的方式吗？@georgedum是的，绝对是。甚至可能值得考虑如何制作一个
Star
类，它可以跟踪自己的RGBA、位置等，并可以将自己绘制到给定的画布上。如果你不确定如何制作动画，请寻找“tweening”库。有许多可用于JavaScript的库。这非常有用。非常感谢！