[英]HTML5/Canvas flickering animation
我已閱讀HTML5 / Canvas是否支持雙緩沖? 以及相關問題,我使用雙緩沖,但它doesent幫助一些時間 。 實際上,我使用另一種方式進行雙緩沖,但是它存在相同的問題。
function drawLoop() {
var scr_context = scr.getContext('2d'); // main canvas
var units_context = units_buffer.getContext('2d'); // units buffer
var unitcolors_context = unitcolors_buffer.getContext('2d'); // units color buffer
var i;
// background
scr_context.fillStyle = "#FFFFEE";
scr_context.fillRect(0, 0, scr.width, scr.height);
units_context.clearRect(0, 0, units_buffer.width, units_buffer.height);
unitcolors_context.clearRect(0, 0, unitcolors_buffer.width, unitcolors_buffer.height);
for (i = 0; i < units_list.length; i++) {
units_list[i].draw(units_context, camera); // flicker some times
units_list[i].drawColor(unitcolors_context, camera); // never flicker
}
scr_context.drawImage(unitcolors_buffer, 0, 0);
scr_context.drawImage(units_buffer, 0, 0);
drawTimer = setTimeout(drawLoop, 1000 / FPS);
}
繪制方法:
this.draw = function(context, camera) {
var sprite;
var drawCoordinates;
sprite = this.sloader.getSpriteByName(this.spritePos.spriteName);
drawCoordinates = sprite.getDrawCoordinatesByXY(this.spritePos.x, this.spritePos.y, camera);
context.drawImage(sprite.getImage(), drawCoordinates.x, drawCoordinates.y);
return;
}
this.drawColor = function(context, camera) {
var sprite;
var drawCoordinates;
sprite = this.sloader.getSpriteByName(this.spritePos.spriteName);
drawCoordinates = sprite.getDrawCoordinatesByXY(this.spritePos.x, this.spritePos.y, camera);
context.putImageData(this.unitMarkBackground, drawCoordinates.x + 21, drawCoordinates.y + 17);
return;
}
不知道在幾乎相同的代碼,相同的緩沖中,閃爍是如何發生或永遠不會發生的。 我已經在Chrome 20和FireFox 13中對其進行了測試,它們都存在相同的問題。
您不需要雙重緩沖,這已經由瀏覽器的引擎實現了。 只是借鑒scr_context一切,並保持scr_context.fillRect()
之上drawLoop()
任何其他圖前。 您確定getDrawCoordinatesByXY()
總是返回屏幕值嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.