HTML5 Canvas мерцание в FireFox 4 - PullRequest
Новая
       17

HTML5 Canvas мерцание в FireFox 4

4 голосов
/ 15 апреля 2011

Я работаю над проверкой концепции на холсте HTML5.Мне удалось заставить это работать как шарм в Chrome и IE9, но в Firefox 4 я постоянно мерцаю, когда он перерисовывает холст.Я попробовал несколько методов, упомянутых на этом сайте, таких как двойная буферизация, но я все еще получаю большое количество мерцания.Любое понимание этого будет оценено! 

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">  
body
{  
    margin:0px;  
    padding:0px;  
    text-align:center;  
} 
canvas
{  
    outline:0;  
    border:1px solid #000;  
    margin-top: 10px;
    margin-left: auto;  
    margin-right: auto;  
}  
</style>
<script type="text/javascript">
var canvasWidth = 640;
var thisXPos = 0;
var canvasHeight = 820;
var thisYPos = 0;
var canvas = null;
var context = null;
var gLoop = null;
var rain = [];
var rainImg = "images/raindrop.gif";
var bgImg = null;
var i;

for (i = 0; i < howManyLetters; i++)
{
    rain.push([Math.floor(Math.random() * canvasWidth), Math.floor(Math.random() * canvasHeight),rainImg]);
}

var DrawRain = function()
{
    for (i = 0; i < 10; i++)
    {
        thisXPos = rain[i][0];
        thisYPos = rain[i][1];
        imgSrc = rain[i][2];
        letterImg = new Image();
        letterImg.setAtX = thisXPos;
        letterImg.setAtY = thisYPos;
        letterImg.onload = function()
        {
            context.drawImage(this, this.setAtX, this.setAtY);
        }
        letterImg.src = imgSrc;
    }
};

var MoveRain = function(e)
{
    for (i = 0; i < 10; i++)
    {
        if ((rain[i][1] - 5) > canvasHeight)
        {
            randomnumber = Math.floor(Math.random()*26);

            rain[i][0] = Math.random() * canvasWidth;
            rain[i][1] = 0;
            rain[i][2] = rainImg;
        }
        else
        {
            rain[i][1] += e;
        }
    }
};

var clear = function()
{
    context.beginPath();
    context.rect(0, 0, canvasWidth, canvasHeight);
    context.closePath();

    bgImg = new Image();
    bgImg.src = "images/bg.png";
    bgImg.onload = function()
    {
        context.drawImage(bgImg,0,0);
    }
} 

var GameLoop = function()
{
    context.save();
    clear();
    MoveRain(1);
    DrawRain();
    context.restore();

    gLoop = setTimeout(GameLoop, 10);
}

function loadGame()
{
    canvas = document.getElementById("gameCanvas");
    context = canvas.getContext("2d");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    GameLoop();
}

</script>
</head>
<body onload="loadGame();">
    <canvas id="gameCanvas"></canvas>
</body>
</html>

Ответы [ 2 ]

5 голосов
/ 15 апреля 2011

Я привел ваш пример к следующему:

http://jsfiddle.net/sPm3b/6/

И он работает очень быстро в Firefox и Chrome.

Итак, мы знаем, что проблема заключается вв изображениях.

Вам необходимо оптимизировать способ их создания и загрузки.Прямо сейчас каждый clear() создает новое изображение и ждет его загрузки!Это изображение должно быть создано только один раз в вашем loadGame(), а затем снова и снова использоваться.

Точно такая же сделка с letterImg в DrawRain().Переместите создание в loadGame()

Это, вероятно, решит проблему.

РЕДАКТИРОВАТЬ:

как это:

Вверху добавьте:

var letterImg = new Image();
var bgImg = new Image();

Тогда 

function loadGame()
{
    canvas = document.getElementById("gameCanvas");
    context = canvas.getContext("2d");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    bgImg.src = "images/bg.png";
    letterImg.src = "images/raindrop.gif";

    // optional: wait for them to load here

    GameLoop();
}

Тогда drawRain, например, будет выглядеть так: 

var DrawRain = function()
{
    for (i = 0; i < 10; i++)
    {
        thisXPos = rain[i][0];
        thisYPos = rain[i][1];
        context.drawImage(letterImg, thisXPosX, thisYPos); // letterImg was already constructed, no need to make it again
    }
};
1 голос
/ 15 апреля 2011

В дополнение к ответу Саймона Сарриса.Я использовал технику «двойного холста», чтобы избежать искажений экрана с тяжелым холстом.

Способ, которым это работает, всегда имеет 2 варианта холста, один в DOM, один снаружи и всегда отрисовкана тот, которого нет в DOM .Я использую его с очередью перерисовки.

вот часть рабочего кода 

(...)
clear: function() {
    //rotating on 2 canvas, one for draw (outside DOM) one for show
    var self = this;
    if (null == self.canvasbackup) {
        var tmpcanvas = self.canvas.clone(true);
        self.canvasbackup = self.canvas;
        self.canvas=tmpcanvas;
    } else {
        var tmpcanvas = self.canvasbackup;
        self.canvasbackup = self.canvas;
        self.canvas=tmpcanvas;
    }
    self.ctx = self.canvas[0].getContext('2d');
    self.ctx.clearRect( 0, 0, self.options.width, self.options.height );
    jQuery.each(self.elements,function(idx,elt){
        // custom function: my elements need to know which canvas they depends on
        elt.reconnectCanvas(self.canvas,self.ctx);
    });
},
inDOM: function() {
    var self = this;
    if(null==self.canvasbackup) {
        //1st time need to get all things in DOM
        self.canvas.appendTo(self.div);
        self.div.appendTo(self.container);
    } else {
        // remove current shown canvas
        self.connectHuman();
        self.canvasbackup.remove();
        // loosing some events here...
        self.canvas.appendTo(self.div);
        // div is already in DOM, we are in redraw
    }
},
redraw: function() {
    var self = this;
    self.clear();
    jQuery.each(self.elements,function(idx,elt){
        elt.draw();
        elt.enddraw();
    });
    self.inDOM();
}
(...)
...