图像加载有时不起作用

Question

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。我不确定为什么这个问题正在发生。有谁知道为什么图像有时不被绘制到画布上？

感谢您张贴...

Answer 1

我们实在看不出足够的整体调用上下文的理解可能什么错。因此，我会推荐的是一些防御性编码，可以消除很多问题。要做的主要事情是摆脱你用于卡片的全局变量。如果您碰巧不止一次地调用renderCanvas()，或者这些变量存在范围问题，那么它们可能在使用或超出范围时被覆盖。完全删除卡全局变量将防止这种情况发生。另外，我试图用几个共享函数删除一堆重复的代码。

变化：

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

更改代码：

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); 
    } 
} 

Answer 2

其实解决的办法是更多的var部分。请仔细检查我，但看起来他正在将backofcardred & backofcardblue泄漏到全局范围内，导致几乎相同的代码在顶部和底部行为不端。

使用image.onload：

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