重绘画布html5而不闪烁 [英] redrawing canvas html5 without flickering

问题描述

我每隔25ms刷新一次屏幕，并且图像闪烁，这里是我的代码

  var FRAME_RATE = 40 ; 
 var intervalTime = 1000 / FRAME_RATE; 
 gameLoop（）; 
 
函数gameLoop（）{
 context.clearRect（0，0，640，640）; 
 renderMap（）; 
 window.setTimeout（gameLoop，intervalTime）; 
} 
  

这里是renderMap（）函数

 函数renderMap（）{
 var startX = playerX  - （screenW / 2）; 
 var startY = playerY  - （screenH / 2）; 
 
 maxX = playerX +（screenW / 2）; 
 maxY = playerY +（screenH / 2）; （x = startX; x  for（y = startY）{
 $ .getJSON（'mapa3.json'，function（json） ; y  intTile = json.layers [0] .data [（（y / 32）* 100）+（x / 32）]; 
 context .putImageData（getTile（intTile  -  1），x  -  startX，y  -  startY）; 
} 
} 
}）; 
 
 var imgCharacter = new Image（）; 
 imgCharacter.src ='char.png'; 
 
 var posX =（screenW  -  imgCharacter.width）/ 2; 
 var posY =（screenH  -  imgCharacter.height）/ 2; 
 imgCharacter.onload = function（）{context.drawImage（imgCharacter，posX，posY）} 
} 
  

我需要对代码做出什么改变才能停止闪烁？

解决方案

我相信这是因为你每次迭代都在加载图片。尝试将 var imgCharacter ... ，以下行和 onload 函数放在<$ c $之外c> renderMap 所以它只运行一次

  var imgCharacter = new Image（）; 
 imgCharacter.onload = function（）{
 renderMap（）; 
} 
 imgCharacter.src ='char.png'; 
 
函数renderMap（）{
 var startX = playerX  - （screenW / 2）; 
 var startY = playerY  - （screenH / 2）; 
 
 maxX = playerX +（screenW / 2）; 
 maxY = playerY +（screenH / 2）; （x = startX; x  for（y = startY）{
 $ .getJSON（'mapa3.json'，function（json） ; y  intTile = json.layers [0] .data [（（y / 32）* 100）+（x / 32）]; 
 context .putImageData（getTile（intTile  -  1），x  -  startX，y  -  startY）; 
} 
} 
}）; 
 
 var posX =（screenW  -  imgCharacter.width）/ 2; 
 var posY =（screenH  -  imgCharacter.height）/ 2; 
 
 context.drawImage（imgCharacter，posX，posY）
} 
  

感谢markE让我知道 onload 函数也需要到 rendermap 之外，我忽略了它第一次

I've a screen being redraw every 25ms, and images are flickering, here is my code

                var FRAME_RATE = 40;
                var intervalTime = 1000/FRAME_RATE;
                gameLoop();

                function gameLoop(){
                    context.clearRect(0, 0, 640, 640);
                    renderMap();
                    window.setTimeout(gameLoop, intervalTime);  
                }

and here is renderMap() function

function renderMap(){
                    var startX = playerX - (screenW / 2);
                    var startY = playerY - (screenH / 2);

                    maxX = playerX + (screenW / 2);
                    maxY = playerY + (screenH / 2);
                    $.getJSON('mapa3.json', function(json){
                        for (x = startX; x < maxX; x=x+32){ 
                            for (y = startY; y < maxY; y=y+32){
                                intTile = json.layers[0].data[((y/32)* 100) + (x/32)];
                                context.putImageData(getTile(intTile - 1), x - startX, y - startY);
                            }
                        } 
                    });

                    var imgCharacter = new Image();
                    imgCharacter.src = 'char.png';

                    var posX = (screenW - imgCharacter.width) / 2;
                    var posY = (screenH - imgCharacter.height) / 2;
                    imgCharacter.onload = function(){context.drawImage(imgCharacter, posX, posY)}       
                }

What changes do I need to make to the code to stop flickering?

解决方案

I believe it is because you are loading the image each iteration. Try putting the var imgCharacter..., the following line, and the image's onload function outside of renderMap so it is only ran once

var imgCharacter = new Image();    
imgCharacter.onload = function () {
    renderMap();
}
imgCharacter.src = 'char.png';

function renderMap() {
    var startX = playerX - (screenW / 2);
    var startY = playerY - (screenH / 2);

    maxX = playerX + (screenW / 2);
    maxY = playerY + (screenH / 2);
    $.getJSON('mapa3.json', function (json) {
        for (x = startX; x < maxX; x = x + 32) {
            for (y = startY; y < maxY; y = y + 32) {
                intTile = json.layers[0].data[((y / 32) * 100) + (x / 32)];
                context.putImageData(getTile(intTile - 1), x - startX, y - startY);
            }
        }
    });

    var posX = (screenW - imgCharacter.width) / 2;
    var posY = (screenH - imgCharacter.height) / 2;

    context.drawImage(imgCharacter, posX, posY)
}

Thank you to markE for letting me know the onload function also needs to go outside renderMap, I overlooked it the first time

这篇关于重绘画布html5而不闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！