我看了StackOverflow上的几篇文章,但没有找到真正解决我问题的文章。 下面的代码可以工作,但是它经常闪烁。
本质上,我只是在创建一个星空背景,其中随机的星空会淡入淡出
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext("2d");
function Star(x, y, a, z, size, b) {
this.x = x;
this.y = y;
this.z = z;
this.a = a;
this.size = size;
this.b = b;
this.draw = function () {
c.fillStyle = "rgba(155, 241, 052, 1)";
c.beginPath();
c.arc(this.x, this.y, this.z, 0, Math.PI * 2, false);
c.fill();
};
this.update = function () {
if (this.z > this.size) {
this.a = 0;
}
if (this.z < 0) {
this.a = 1;
}
if (this.a == 1) {
this.z += this.b;
} else {
this.z -= this.b;
}
this.draw();
};
}
var starArray = [];
for (var i = 0; i < 100; i++) {
var size = Math.random() * 3 + 2; //size range
var x = Math.random() * innerWidth; //x coordinate
var y = Math.random() * innerHeight; //y coordinate
var z = Math.random() * size; //star size
var a = 1; //on-off switch for the star to fade in or fade out
var b = Math.random() / 20; //fade-in/fade-out rate (random for each star)
starArray.push(new Star(x, y, a, z, size, b));
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
for (var i = 0; i < starArray.length; i++) {
starArray[i].update();
}
}
animate();
arc
调用的半径为负值,只需执行以下操作:
c.arc(this.x, this.y, Math.max(this.z, 0), 0, Math.PI * 2, false);
您正在向CanVasRenderingContext2d.arc()
提供负半径。 您可能需要重新考虑您的逻辑,或者使用Math.abs
来确保提供的半径始终是非负的。
c.arc(this.x, this.y, Math.abs(this.z), 0, Math.PI * 2, false);
null
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext("2d");
function Star(x, y, a, z, size, b) {
this.x = x;
this.y = y;
this.z = z;
this.a = a;
this.size = size;
this.b = b;
this.draw = function () {
c.fillStyle = "rgba(155, 241, 052, 1)";
c.beginPath();
c.arc(this.x, this.y, Math.abs(this.z), 0, Math.PI * 2, false);
c.fill();
};
this.update = function () {
if (this.z > this.size) {
this.a = 0;
}
if (this.z < 0) {
this.a = 1;
}
if (this.a == 1) {
this.z += this.b;
} else {
this.z -= this.b;
}
this.draw();
};
}
var starArray = [];
for (var i = 0; i < 100; i++) {
var size = Math.random() * 3 + 2; //size range
var x = Math.random() * innerWidth; //x coordinate
var y = Math.random() * innerHeight; //y coordinate
var z = Math.random() * size; //star size
var a = 1; //on-off switch for the star to fade in or fade out
var b = Math.random() / 20; //fade-in/fade-out rate (random for each star)
starArray.push(new Star(x, y, a, z, size, b));
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
for (var i = 0; i < starArray.length; i++) {
starArray[i].update();
}
}
animate();
<canvas></canvas>