Question

我在requestAnimationFrame（）上绘制了200张图片，代码如下：

<canvas id = "canvas"></canvas>
<script>

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
height = window.innerHeight;
width = window.innerWidth
canvas.width = width; 
canvas.height = height; 

playerY = height / 10;
playerX = 20;
var diamond = new Image();
diamond.src = "https://www.shareicon.net/data/128x128/2016/05/10/762776_poker_512x512.png";

var direction = 1;
move();

function move(){

    if(playerX > width)
    direction = -12;
    if(playerX < 0) direction = 12;

    playerX+= direction;
    ctx.clearRect(0, 0, width, height);
    for(var i = 1; i < 1000; i+=50){ //simply draw all within 50 y margin
        ctx.drawImage(diamond,0, 0, 128, 128, playerX, playerY + i, 70, 70);
    }                                       
    requestAnimationFrame(move);

}

</script>

正如您所看到的，我使用clearRect清除整个屏幕：

ctx.clearRect(0, 0, width, height);

现在在我的实际游戏中我实际上并没有清除整个屏幕，只有需要重新绘制的部分，所以它看起来像这样：

ctx.clearRect(0, 0, width, height - 50); //this is in my bugged game

这样我就不需要重绘游戏的静态部分（通常是背景和按钮）。

嗯，我注意到我的身高 - 50＆＃34;接近，在某些设备上和某些情况下（在一秒内列出它们）我画布上的每个画面的像素开始跳舞。例如：

https://s30.postimg.org/su18gn7ox/bug.png

这个错误在没有在60FPS上运行的中型设备上显而易见，或者只是在第二个屏幕上运行4K视频（https://www.youtube.com/watch?v=iNJdPyoqt8U）或者某个重型浏览器应用程序正在运行时运行此代码时。这个错误让我疯了2天，因为我正在为Android开发，它发生在一些中型设备上。对此问题的任何修复都表示赞赏。

帆布＆＃39; clearRect（）检测到奇怪的错误

0 个答案: