我想保持动画不变，我的问题在于动画的闪烁。
如果出于某种原因我的问题还需要详细说明，请现在就让我来解释一下。
Deploymentvar text = 'got it';
document.getElementById('mycanvas').style.backgroundColor = 'lightgray';
var ctx = document.getElementById('mycanvas');
var c = ctx.getContext('2d');
function ball(x, y, zx, zy, rotation,goldx,goldy) {
this.x = x;
this.y = y;
this.zx = zx;
this.zy = zy;
this.rotation = rotation;
this.goldx = goldx;
this.goldy = goldy;
this.draw = function() {
c.beginPath();
c.setTransform(1, 0, 0, 1, 0, 0);
c.translate(0, 0.01);
c.rotate(this.rotation);
c.fillStyle = 'black';
c.font="10px corsive";
c.fillText("$100", this.x, this.y + 10);
c.strokeStyle = "gray"
c.rect(this.x, this.y, 24,14);
c.fillStyle = 'rgba(0, 128, 0, 0.49)';
c.fill();
c.stroke();
c.closePath();
}
var X = Math.floor(Math.random() *10);
this.draw1 = function() {
c.beginPath();
c.arc(this.goldx, this.goldy, 5, Math.PI*2,false);
c.fillStyle = 'gold';
c.fill();
c.stroke();
}
this.update = function() {
var b = Math.random() * 500;
if(this.y > 510 || this.x > 510 || this.x < -30) {ballArray.splice(i,1)}
this.x += this.zx;
this.y += this.zy;
if(ballArray.length < 99) {ballArray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))}
if(x > 350) { this.rotation += 0.00009} else {this.rotation -= 0.00009};
this.draw();
if(this.goldy > 510 || this.goldx > 510 || this.goldx < 0) {goldArray.splice(j,1)}
if(goldArray.length < 49) {goldArray.push(new ball(0,0,0,0,0,goldx,goldy))}
this.goldy += 1;
this.draw1();
}
}
var goldArray = [];
for (j = 0; j < 50; j++){
var goldx = Math.random() * 500;
var goldy = Math.random() * 500;
goldArray.push(new ball(0,0,0,0,0,goldx,goldy));
}
var ballArray = [];
for(i= 0; i < 100; i++) {
var x = Math.random() * 500;
var y = Math.random() * 500;
var zx = Math.random() - 0.5;
var zy = 1;
var rotation = 0;
ballArray.push(new ball(y,x,zx,zy,rotation,goldx,goldy));
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0,0,500, 500);
for(j = 0; j< goldArray.length; j++) {
goldArray[j].update();
}
for(i = 0; i < ballArray.length; i++) {
ballArray[i].update();
}
}
animate();
答案 0 :(得分：0)
由于很多原因，你的动画很轻松。
主要是删除球和/或金的方式。您可以在for循环中调用update函数。
for(i = 0; i < balls.length; i++){
balls[i].update();
}
然后在更新功能中测试球是否超出范围。如果是你从阵列中删除它
if(this.y > 510) { // example not your code
balls.splice(i,1);
}
但是你忽略了这样一个事实：你刚刚把所有球都放在一个索引中的数组中。当更新功能返回时，i处的球已被移除，而其上方的下一个球现在位于i。然后循环递增i并绘制下一个球，跳过一个球。
跳过的球没有渲染到那个帧，因此你得到了闪烁。与黄金相同。
还有其他问题（很多）并且为了解决这个问题需要完全重写。
你可以做的只是重置球和金而不是删除它并创建另一个。
你在哪里
if(this.y > 510 || this.x > 510 || this.x < -30) { ballArray.splice(i,1) }
将其更改为
if(this.y > 510 || this.x > 510 || this.x < -30) {
this.x = Math.random() * 500;
this.y = Math.random() * 500;
this.zx = Math.random() - 0.5;
this.zy = 1;
this.rotation = 0;
}
并删除该行
if(ballArray.length < 99) {ballArray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))}
为黄金做同样的事。
这将帮助您为下一个问题做好准备。
你仍然会遇到问题，因为你将黄金和球作为一个物体，每个球都有球和金，每个球都有相同的颜色。
你需要将球和金作为单独的物体，这样黄金就不会吸球而反之亦然。
你应该
function Gold(){
this.draw(){ // draw code
this.update() { // update code
...
}
function Ball(){ /* code */
this.draw(){ // draw code
this.update() { // update code
...
}
并创建每个
ballArray.push(new Ball( stuff));
goldArray.push(new Gold( stuff));
此外，您还需要声明尚未为i，j完成的所有变量，这些变量最终会在全局范围内出现，并且很快就会对您造成错误。
每当你使用一个变量时，它必须在函数内的某个位置有一个声明。
例如
function animate(){
var i;
var j;
... rest of code.
但我暂时将它留在那里。
答案 1 :(得分：0)
我不确定这对画布是否有帮助，但是如果你将变换：translatez（0）添加到父容器，它会启用硬件加速广告可以使用变换或矩阵停止复杂动画的闪烁