图像onload有时不起作用

时间：2014-02-21 04:08:03

标签： html5 image canvas onload drawimage 

function rendercanvas()
{
    if(!window.isDirty && !gameover)
    {
        context.clearRect(0,0,window.innerWidth,1000);

        backofcardred = new Image();
        backofcardred.addEventListener('load', drawDealerStack);
        backofcardred.src = "graphics/backofcardred.jpg";// + '?' + (new Date()).getTime();


        backofcardblue = new Image();
        backofcardblue.addEventListener('load', drawClientStack);
        backofcardblue.src = "graphics/backofcardblue.jpg";// + '?' + (new Date()).getTime();


        context.beginPath();
        context.rect(100, 195, 100, 146);
        context.fillStyle = 'blue';
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = 'black';
        context.stroke();

        context.beginPath();
        context.rect(100, 343, 100, 146);
        context.fillStyle = 'red';
        context.fill();
        context.lineWidth = 1;
        context.strokeStyle = 'black';
        context.stroke();

        context.beginPath();
        context.fillStyle = 'black';
        context.strokeStyle = 'black';
        context.font = 'italic 30pt Calibri';
        var message = "Client Score:"+clientTally+" Dealer Score:"+dealerTally;
        context.fillText(message, 220,100);

        if(currentWinner!="")
        {

        }
    }

    if(window.isDirty && !gameover)
    {
        context.clearRect(0,0,window.innerWidth,1000);

        context.beginPath();
        context.fillStyle = 'black';
        context.strokeStyle = 'black';
        context.font = 'italic 30pt Calibri';
        var message = "Client Score:"+clientTally+" Dealer Score:"+dealerTally;
        context.fillText(message, 220,100);

        context.fillStyle = 'black';
        context.strokeStyle = 'black';
        context.font = 'italic 10pt Calibri';

        backofcardred = new Image();
        backofcardred.addEventListener('load', drawDealerStack);
        backofcardred.src = "graphics/backofcardred.jpg";// + '?' + (new Date()).getTime();


        backofcardblue = new Image();
        backofcardblue.addEventListener('load', drawClientStack);
        backofcardblue.src = "graphics/backofcardblue.jpg";// + '?' + (new Date()).getTime();


        if( clientwarareastack.cards[0] != null)
        {
            context.beginPath();
            context.rect(100,343,100,146);
            context.fillStyle = 'white';
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = 'white';
            context.stroke();
            context.beginPath();

            suitecharacter( clientwarareastack.cards[0] );
            var message = clientwarareastack.cards[0].rank + " " + suitUChar;
            context.fillText(message, 100+10, 343+25);
        }
        else
        {
            context.beginPath();
            context.rect(100, 343, 100, 146);
            context.fillStyle = 'red';
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = 'black';
            context.stroke();       
        }

        if( dealerwarareastack.cards[0] != null)
        {
            context.beginPath();
            context.rect(100,195,100,146);
            context.fillStyle = 'white';
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = 'white';
            context.stroke();   

            suitecharacter( dealerwarareastack.cards[0] );
            var message = dealerwarareastack.cards[0].rank + " " + suitUChar;
            context.fillText(message, 100+10, 195+25);
        }
        else
        {
            context.beginPath();
            context.rect(100, 195, 100, 146);
            context.fillStyle = 'blue';
            context.fill();
            context.lineWidth = 1;
            context.strokeStyle = 'white';
            context.stroke();       
        }

    }

    if(gameover)
    {
        context.clearRect(0,0,window.innerWidth,1000);
        context.fillText("GAME OVER. REFRESH THE PAGE TO START OVER.FINAL WINNER:"+finalwinner, 100+10, 195+25);
    }
}

function drawDealerStack() {
    context.beginPath();
    context.drawImage(backofcardblue, 100, 50);
    context.stroke();
}
function drawClientStack() {
    context.beginPath();
    context.drawImage(backofcardred, 100, window.originYclientstack);
    context.stroke();
}

backofcardred和backofcardblue有时不会渲染到画布。大部分时间我都会看到backofcardred和backofcardblue因此问题是间歇性的。取消注释// + '?' + (new Date()).getTime();只会使问题更严重。有什么可以做的，以确保每次加载图像？我不反对jQuery。我不确定为什么会出现这个问题。有谁知道为什么图像有时不被绘制到画布上？

感谢您发帖...

2 个答案:

答案 0 :(得分：2)

我们无法真正看到您的整体调用情境，以了解可能出现的问题。因此，我建议的是一些防御性编码可以消除许多问题。要做的主要是摆脱你用于卡的全局变量。如果您碰巧多次调用renderCanvas()或者这些变量存在范围问题，那么它们在被使用或超出范围时可能会被覆盖。完全删除卡全局变量将防止这种情况发生。另外，我试图用一些共享函数删除一堆重复的代码。

的变化：

  1. 通过将卡片设置为局部变量来删除卡片的全局变量。
  2. 在加载回调中使用this。
  3. 使用共享本地函数替换大量重复代码（不是潜在解决方案的一部分，但使代码更清晰）。
  4. 将事件处理函数移动为本地函数（不需要是全局函数）。

    5. 更改了代码：

    function rendercanvas() {
    function makeCards() {
        var backofcardred = new Image();
        backofcardred.addEventListener('load', drawDealerStack);
        backofcardred.src = "graphics/backofcardred.jpg";// + '?' + (new Date()).getTime();


        var backofcardblue = new Image();
        backofcardblue.addEventListener('load', drawClientStack);
        backofcardblue.src = "graphics/backofcardblue.jpg";// + '?' + (new Date()).getTime();
    }

    function drawRect(x, y, w, h, fill, width, stroke){
        context.beginPath();
        context.rect(x,y,w,h);
        context.fillStyle = fill;
        context.fill();
        context.lineWidth = width;
        context.strokeStyle = stroke;
        context.stroke();
    }

    function drawText(msg) {
        context.beginPath();
        context.fillStyle = 'black';
        context.strokeStyle = 'black';
        context.font = 'italic 30pt Calibri';
        context.fillText(msg, 220,100);
    }

    function drawDealerStack() {
        context.beginPath();
        context.drawImage(this, 100, 50);
        context.stroke();
    }

    function drawClientStack() {
        context.beginPath();
        context.drawImage(this, 100, window.originYclientstack);
        context.stroke();
    }

    if(!window.isDirty && !gameover)
    {
        context.clearRect(0,0,window.innerWidth,1000);
        makeCards();
        drawRect(100, 195, 100, 146, 'blue', 1, 'black');
        drawRect(100, 343, 100, 146, 'red', 1, 'black');
        drawText("Client Score:"+clientTally+" Dealer Score:"+dealerTally);


        if(currentWinner!="")
        {

        }
    }

    if(window.isDirty && !gameover)
    {
        context.clearRect(0,0,window.innerWidth,1000);
        drawText("Client Score:"+clientTally+" Dealer Score:"+dealerTally);
        makeCards();

        if( clientwarareastack.cards[0] != null)
        {
            drawRect(100,343,100,146, 'white', 1, 'white');
            context.beginPath();
            suitecharacter( clientwarareastack.cards[0] );
            var message = clientwarareastack.cards[0].rank + " " + suitUChar;
            context.fillText(message, 100+10, 343+25);
        }
        else
        {
            drawRect(100, 343, 100, 146, 'red', 1, 'black');
        }

        if( dealerwarareastack.cards[0] != null)
        {
            drawRect(100,195,100,146, 'white', 1, 'white');
            suitecharacter( dealerwarareastack.cards[0] );
            var message = dealerwarareastack.cards[0].rank + " " + suitUChar;
            context.fillText(message, 100+10, 195+25);
        }
        else
        {
            drawRect(100, 195, 100, 146, 'blue', 1, 'white');
        }

    }

    if(gameover)
    {
        context.clearRect(0,0,window.innerWidth,1000);
        context.fillText("GAME OVER. REFRESH THE PAGE TO START OVER.FINAL WINNER:"+finalwinner, 100+10, 195+25);
    }
}

答案 1 :(得分：1)

实际上，解决方案更多是var部分。请仔细检查我，但看来他正在泄漏backofcardred＆amp; backofcardblue进入全局范围，导致几乎相同的代码在顶部和底部出现行为异常。

使用image.onload：

var image = new Image();
image.onload = function() {
    // the image is fully loaded and ready to use
}
image.src = "yourImage.png";
相关问题
最新问题