Image onload有时不工作 [英] Image onload doesn't work sometimes
问题描述
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 code> backofcardblue 有时不会呈现到画布上。大多数时候，我看到 backofcardred 和 backofcardblue 所以问题是间歇性的。取消注释 // +'？'+（new Date（））。getTime（）; 只会使问题更严重。有什么可以做，以确保图像加载每次？我不反对jQuery。我不知道为什么问题发生。
backofcardred and backofcardblue sometimes do not render to the canvas. Most of time I see backofcardred and backofcardblue so the problem is intermittent. Uncommenting // + '?' + (new Date()).getTime(); only makes the problem far worse. Is there anything that can be done to make sure the image loads every time? I'm not opposed to jQuery. I'm not sure yet why the problem is happening. Does anyone know why the image sometimes isn't drawn to the canvas?
感谢您发布...
推荐答案
我们不能真正看到你的整个调用上下文，以了解可能会出错。因此，我建议的是一些防御性编码，可以消除许多来源的问题。主要做的是去掉你用于卡的全局变量。如果你碰巧正在调用 renderCanvas（）多次，或者这些变量有一个范围问题，那么他们可能会被覆盖，当他们正在使用或超出范围。完全删除卡全局变量将防止这种情况。此外，我试图删除一些重复的代码与一些共享函数。
We can't really see enough of your overall calling context to understand what might be going wrong. As such, what I would recommend is some defensive coding that removes many sources of issues. The main thing to do is to get rid of the global variables you are using for the cards. If you happen to be calling renderCanvas() more than once or there's a scoping issue with those variables, then they may be getting overwritten while they are being used or go out of scope. Removing the card global variables entirely will protect against that. In addition, I've tried to remove a bunch of duplicate code with a few shared functions.
更改：
- 通过将卡片的全局变量设为局部变量来删除它们。
- 在加载中使用
this - 使用共享的本地函数（不是潜在解决方案的一部分，而是使代码更清晰）替换大量重复的代码。
已更改的代码：
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);
}
}
这篇关于Image onload有时不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
