如何在画布上对 Path2D 对象进行动画处理

Question

在我的画布上，我有2种类型的圆圈：

我直接从上下文中创建的那些(= 装饰性星星(：

drawDecorativeStar = (decorativeStar) => {
this.ctx.beginPath();
this.ctx.arc(decorativeStar.x, decorativeStar.y, decorativeStar.radius, 0, 2 * Math.PI);
this.ctx.fillStyle = "rgba(254, 255, 242," + decorativeStar.alpha + ")";
this.ctx.fill();
this.ctx.closePath();
}

以及那些创建为 Path2D 的，因为我希望它们是可点击的(=planetPaths(：

createPlanetPaths = (planets) => {
for (var i = 0; i < planets.length; i++) {
this.planetPaths[i] = {
ref: new Path2D(),
x: Math.random() * WIDTH_CANVAS,
y: Math.random() * HEIGHT_CANVAS,
radius: this.getPlanetRadius(planets[i]),
color: planets[i].color,
}
}
}
drawPlanets = (planetPaths) => {
for (let i = 0; i < planetPaths.length; i++) {
planetPaths[i].ref.arc(planetPaths[i].x, planetPaths[i].y, planetPaths[i].radius, 0, 2 * Math.PI);
planetPaths[i].ref.gradient = this.ctx.createLinearGradient((planetPaths[i].x - planetPaths[i].radius), (planetPaths[i].y - planetPaths[i].radius), 1.02 * (planetPaths[i].x + planetPaths[i].radius), 1.02 * (planetPaths[i].y + planetPaths[i].radius));
planetPaths[i].ref.gradient.addColorStop(0, planetPaths[i].color);
planetPaths[i].ref.gradient.addColorStop(1, 'red');
this.ctx.fillStyle = planetPaths[i].ref.gradient;
this.ctx.fill(planetPaths[i].ref);
}
};

现在我想使用 requestAnimationFrame 对这些圆圈进行动画处理。我的问题是this.ctx.clearRect(0, 0, WIDTH_CANVAS, HEIGHT_CANVAS);似乎对 Path2D 对象没有影响，而它对其他对象有效。

有没有另一种方法可以清除 Path2D 对象？

编辑，这里是我的 updateCanvas 方法，以生成动画：

updateCanvas() {
this.ctx.clearRect(0, 0, WIDTH_CANVAS, HEIGHT_CANVAS);
for (let i = 0; i < this.planetPaths.length; i++) {
var planetPath = this.planetPaths[i];
if (planetPath.x < WIDTH_CANVAS) {
planetPath.x += 1;
} else {
planetPath.x = 0;
}
}

for (let i = 0; i < this.decorativeStars.length; i++) {
var star = this.decorativeStars[i];
if (star.decreasing == true) {
star.alpha -= star.decreasingIncreasingRatio;
if (star.alpha < 0.10) { star.decreasing = false; }
}
else {
star.alpha += star.decreasingIncreasingRatio;
if (star.alpha > 0.95) { star.decreasing = true; }
}
// star.x+=0.01;
}
this.drawDecorativeStars(this.decorativeStars);
this.drawPlanets(this.planetPaths);
this.myReq = requestAnimationFrame(this.updateCanvas);
}

Answer 1

您不正确地使用了 Path2D 对象。

在drawPlanets函数中，每次调用 draw 时都会向路径添加子路径。

planetPaths[i].ref.arc(planetPaths[i].x, planetPaths[i].y, planetPaths[i].radius, 0, 2 * Math.PI);

因此，每次用this.ctx.fill(planetPaths[i].ref);绘制路径时，您都会绘制到该时间添加的所有子路径。

使用Path2D

• 您无法清除Path2D对象。
• 只需添加一次要渲染的路径。
• 若要更改路径，需要在渲染路径时创建新Path2D或转换路径。

修复

创建路径和所有不变状态一次(init(，然后渲染多次(每帧(

您的代码应该看起来更像...

createPlanetPaths = planets => {
for (const planet of planets) {
const path = new Path2D();
const x = Math.random() * WIDTH_CANVAS;
const y = Math.random() * HEIGHT_CANVAS;
const radius =  this.getPlanetRadius(planet);
path.arc(x, y, radius, 0, 2 * Math.PI);
const gradient = this.ctx.createLinearGradient((px - radius), (y - radius), 1.02 * (x + radius), 1.02 * (y + radius));
gradient.addColorStop(0, planet.color);
gradient.addColorStop(1, 'red');
this.planetPaths[i] = {path, gradient};
}
}
drawPlanets = planetPaths => {
for (const planetPath of planetPaths) {
this.ctx.fillStyle = planetPath.gradient;
this.ctx.fill(planetPath.path);
}
}