畫布圖像沒有繪圖？

我用來加載兩個圖像的代碼（注意，一個圖像是7MB（我知道 - 我會稍後修復它））。畫布圖像沒有繪圖？

var loaded = 0; 
var img1 = new Image(); 
var img2 = new Image(); 
img1.onload = function(){ both() }; 
img2.onload = function(){ both() }; 
img1.src = 'map.png'; 
img2.src = 'ovl.png'; 

function both() { 
    loaded++ 
    console.log(loaded); 
    if (loaded == 2) { 
     console.log("LOADED"); 
     resizeCanvas(); 
     console.log("RESIZED"); 
    } 
} 

function resizeCanvas() { 
    //resize code 
    drawStuff(); 
} 
function drawStuff() { 
    console.log("DRAWSTART"); 
    ctx.save(); 
    ctx.setTransform(1,0,0,1,0,0); 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.fillStyle="#868f9c"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
    ctx.restore(); 
    ctx.drawImage(img1, 0,0); 
    ctx.drawImage(img2, 0,0); 
    console.log("DRAWED"); 
}

正如所料，控制檯輸出是;

(index):28 1 
(index):28 2 
(index):30 LOADED 
(index):81 DRAWSTART 
(index):90 DRAWEND 
(index):64 RESIZED

但是，圖像是無處可尋，大部分時間。有時他們出現在30秒後，但沒有其他功能的工作（我也有一些平移/縮放的東西）。

請注意，如果我註釋掉ctx.drawImage(img[1,2], 0,0);之一，它的工作原理完全正常。這似乎是畫兩個圖像只是不工作...

來源

2016-11-21 user1768788

聲音很奇怪，drawImage是同步的，所以在實際繪製它之前，您不應該在控制檯中獲取DRAWEND。您使用哪個瀏覽器？ – Kaiido

@Kaiido Chrome。 – user1768788

你應該先測試小圖像，以檢查一切正常。然後，爲了管理大圖像，您可以使用預加載庫，如http://www.createjs.com/preloadjs

來源

2016-11-21 10:08:29 tit

Sry，但這與操作代碼無關，爲60％，圖像已經預先加載 – Hydro

畫布圖像沒有繪圖？

回答

相關問題