Question

我正在使用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();
  }

是否可以给每个路径一个类？像ctx.classList.add('star');一样？最终，我希望能够使用CSS为它们设置动画。

谢谢！

修改

看起来并不是CSS的理想之选。我想我将尝试在setInterval循环中使用javaScript为我的星星设置动画。这是我正在使用的代码库。 Twinkling Stars Canvas

Answer 1

最简单的答案是：否。CSS不会作用于画布上绘制的元素。

在画布上绘画就像直接在纸上绘画一样。您正在使用2D上下文在笔上进行操作。当您可以找到一种读取CSS并执行动画（通过重绘和重绘画布）的方法时，我认为这会比其他任何方法都困难得多。

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

如果绝对必须使用画布，则还可以将SVG绘制到画布上。 Convert the SVG to a Data URI，然后将该URI加载到Image对象中，然后可以将其putImage放到画布上。您将需要弄清楚每次SVG更新时如何绘制，或者每隔一段时间（例如SVG）轮询新的requestAnimationFrame信息。

Answer 2

否，CSS无法为画布绘制动画或与之交互。

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

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

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

我可以使用JavaScript在画布上绘制类的路径吗？

2 个答案: