Могу ли я дать класс для пути, нарисованного на холсте с помощью JavaScript?

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 - не тот путь,Я думаю, что я просто попробую анимировать мои звезды с помощью javaScript в цикле setInterval.Вот кодекс того, с чем я работаю. Холст мерцающих звезд

Answer 1

Нет, CSS не может анимировать или взаимодействовать с рисованием на холсте.

Но вы можете создать класс Star, который обеспечит ООП способ обновления, рендеринга и анимации звезд.

изатем поместите все звезды в массив и обновите / отобразите их в цикле анимации.

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

Answer 2

Краткий ответ: Нет. CSS не действует на элементы, нарисованные на холсте.

Рисование на холсте похоже на рисование непосредственно на бумаге.Вы используете 2D-контекст, чтобы воздействовать на перо.Хотя вы могли бы найти способ читать CSS и выполнять анимацию (путем перерисовки и перерисовки холста), я думаю, что это будет намного сложнее, чем в любой другой альтернативе.

Если вы настроены на использование CSS, одной из альтернатив является использование SVG + CSS.Элементы в SVG могут реагировать на ваши CSS, очень похоже на HTML элементы.

Если вам абсолютно необходимо использовать холст, вы также можете нарисовать SVG на свой холст. Преобразуйте SVG в URI данных , затем загрузите этот URI в объект Image, который затем вы можете putImage на холсте.Вам нужно будет выяснить, как рисовать каждый раз SVG обновления, или опросить новую информацию SVG с интервалом (например, requestAnimationFrame).