时间戳

首页 > 解决方案 > 我可以给用javascript在画布上绘制的路径提供一个类吗？

javascript - 我可以给用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();
  }

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

谢谢！

编辑

看起来CSS不是要走的路。我想我会尝试在 setInterval 循环中使用 javaScript 为我的星星设置动画。这是我正在使用的代码笔。闪烁的星星帆布

标签： javascriptcanvashtml5-canvas

解决方案

简短的回答是：不。CSS 不会作用于画布上绘制的元素。

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

如果您打算使用 CSS，另一种选择是使用SVG+CSS。中的元素SVG可以对你的 做出反应CSS，很像HTML元素。

如果您绝对必须使用画布，也可以将 SVG 绘制到画布上。将 转换SVG为 Data URI，然后将该 URI 加载到一个Image对象中，然后您可以将其putImage加载到画布上。您必须弄清楚每次SVG更新时如何绘制，或每隔一段时间轮询新SVG信息（如requestAnimationFrame）。

推荐阅读