html5绘图闪烁怎么解决,javascript – HTML5 Canvas在绘图上闪烁

我开始使用等距游戏,当绘制地面的所有部分时,我的画布闪烁(不在IE中).当我将fps设置为20或更低时,闪烁停止.我怎么解决这个问题？有任何想法吗？

var camerax = 300, cameray = 100;

var fps = 60;

function draw() {

clearCanvas();

drawGround();

}

function drawGround() {

var img = new Image();

img.onload = function() {

var width = img.width;

var height = img.height;

for (var x = 0; x < 3; x++) {

for (var y = 3; y >= 0; y--) {

mx = (x-y)*height + camerax;

my = (x+y)*height/2 + cameray;

ctx.drawImage(img, mx, my);

}

}

}

img.src = "ground.png";

}

var loop = setInterval(function() {

update();

draw();

}, 1000/fps);

解决方法:

现在你每帧重新加载图像,除非onload回调在帧的16ms内触发,你将看到一个空白画布.

您只需要调用新的Image,img.onload序列一次,以预加载图像.然后onload回调将启动你的第一帧,并且绘制调用可以自由地使用内存中的图像.

就像是：

var camerax = 300, cameray = 100;

var fps = 60;

var img;

var loop;

function init() {

img = new Image();

img.onload = function() {

loop = setInterval(function() {

update();

draw();

}, 1000/fps);

};

img.src = "ground.png";

}

function draw() {

clearCanvas();

drawGround();

}

function drawGround() {

var width = img.width;

var height = img.height;

for (var x = 0; x < 3; x++) {

for (var y = 3; y >= 0; y--) {

mx = (x-y)*height + camerax;

my = (x+y)*height/2 + cameray;

ctx.drawImage(img, mx, my);

}

}

}

}

当然,一旦等待多个图像预加载就会变得更加复杂,因为只有在完成所有这些图像后才需要启动循环.

标签：javascript,html5,refresh,canvas,blink

来源： https://codeday.me/bug/20190529/1177831.html