Neuzeichnen canvas html5, ohne zu flackern
Habe ich ein Bildschirm Neuzeichnen alle 25ms, und die Bilder flimmern, hier ist mein code
var FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
gameLoop();
function gameLoop(){
context.clearRect(0, 0, 640, 640);
renderMap();
window.setTimeout(gameLoop, intervalTime);
}
und hier ist renderMap () - Funktion
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)}
}
Welche änderungen muss ich machen um den code zu stoppen, flackern?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube, es liegt daran, dass Sie laden das Bild in jeder iteration. Versuchen Sie, die
var imgCharacter...
die folgende Zeile ein, und das Bild istonload
Funktion außerhalb derrenderMap
so ist es nur einmal liefDanke an die markE für die lassen Sie mich wissen, die
onload
Funktion muss auch nach draußen zu gehenrenderMap
, übersah ich es das erste malimgCharacter.onload = function(){ renderMap(); context.drawImage(imgCharacter, posX, posY); }
und in renderMap, die ich in der letzten Zeile der Methode drawImage und der Rückgabe-Wert konnte nicht konvertiert werden, um beliebige: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, zu dieser Zeile.Laden Sie alle Bilder und andere Daten, bevor Sie zeichnen und Speicher Sie im inneren array.
Bessere Nutzung requestAnimationFrame.
Denken Sie daran, immer JSON (oder anderen Daten) kann einige Zeit in Anspruch nehmen.