防止画布在重绘时闪烁? [英] Prevent canvas from flickering on redraw?
本文介绍了防止画布在重绘时闪烁?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我目前正在像这样重绘:
I am currently doing redraws like this:
这工作正常,但偶尔会出现字符精灵闪烁的情况.这种情况足以引起很大的烦恼.我应该如何更有效地做到这一点?我还尝试过更改重绘频率.较高的频率加剧了该问题,而较低的频率由于图形原因不够快.
This works fine, except once in a while the character sprite will flash. This happens enough to be a pretty big annoyance. How should I do this more efficiently? I also tried changing the redraw frequency. Higher frequencies exacerbated the problem while lower frequencies are not fast enough for graphical reasons.
init()
{
//stuff
return setInterval(draw,100);
}
function draw()
{
drawBackground();
character.draw(); //draws a sprite
}
//this function is called when character is created
Character.prototype.setImage = function ()
{
this.avatar= new Image();
this.avatar.onload=function(){
this.imageLoaded=true;
};
this.avatar.src='/img/sprite.png';
}
Character.prototype.draw=function(ctx)
{
var imageW=this.imageW;
var imageH=this.imageH;
ctx.drawImage(avatar,20,20,imageW,imageH);
}
推荐答案
为什么每次绘制背景时都尝试下载背景图像?也许下一个代码更好:
Why you try to download background image each time when drawing background? Maybe next code is better:
var bg=null,ctxDrawInterval=-1;
init() {
//stuff
bg=new Image();
bg.onload=function(){
ctx.drawImage(bg,0,0,GAME_WIDTH,GAME_HEIGHT);
ctxDrawInterval=setInterval(draw,100);
}
//bg.onerror=function(){
// what if error downloading?
//}
bg.src='img/background.png'; // must be placed after bg.onload
}
function draw() {
drawBackground();
character.draw(); //draws a sprite
}
function drawBackground() {
ctx.drawImage(bg,0,0,GAME_WIDTH,GAME_HEIGHT);
}
这篇关于防止画布在重绘时闪烁?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文