reactjs - 如何在画布上为 Path2D 对象设置动画
问题描述
在我的画布上,我有两种类型的圆圈:
我直接从上下文中创建的那些(= decoratingStars):
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);
}
解决方案
您错误地使用了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
使固定
一次创建路径和所有不变的状态(初始化),然后多次渲染(每帧)
你的代码应该看起来更像......
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);
}
}
推荐阅读
- sql - 如何使用 ssisdb 在运行过程中获取 ssis 包执行信息
- vue.js - 在 webpackEmptyContext 中找不到模块“../assets/logo.png”(在 ./src/component
- css - Bootstrap的scss文件在scss文件架构中的正确位置
- html - 如何设置页面上最后一个 Angular 组件的样式?
- wordpress - 查找 Wordpress 302 重定向
- python - 如何过滤掉具有特定数字的数字?
- ibeacon - Android 信标库 - 仅检测特定的 UUID
- uwp - 在 Xbox one 中运行的 C# UWP GamePad 类中需要帮助
- python - 是否有一种灵活的方法可以通过从 shapefile 读取或使用一组顶点创建的多边形来裁剪栅格?
- sas - SAS如何在特定字符串之前提取单个字符串?