畫布未被繪製html5（javascript，關閉）

如果我刪除「alert（stepHor）;」線，我的畫布上沒有任何東西可以畫出來。但是，如果我讓警報（stepHor），一切都如預期完美。如果它有像這樣的img.onload，我會理解，但在這裏我沒有。它與「關閉」有什麼關係？提前致謝。畫布未被繪製html5（javascript，關閉）

function draw(imageData) { 
    var canvas=document.getElementById('bg'); 
    if(canvas.getContext){ 
     var ctx=canvas.getContext('2d'); 
     ctx.scale(0.4,0.4); 

     var stepHor=Math.floor(imageData.width/imax); 
     var stepVer=Math.floor(imageData.height/jmax); 
     alert(stepHor); 

     for(i=0;i<=imax;i++){ 
      for(j=0;j<=jmax;j++){ 
       var index=(j*stepVer+Math.floor((imageData.height-jmax*stepVer)/2))*(4*imageData.width)+(i*stepHor*4)+Math.floor((imageData.width-imax*stepHor)/2)*4;//the first 'Math.floor' member is to center the image vertically, the second 'Math.floor' member is to center the image horizontally 
       var red=imageData.data[index]; 
       var green=imageData.data[index+1]; 
       var blue=imageData.data[index+2]; 
       var alpha=imageData.data[index+3]; 
       ctx.fillStyle='rgb(' +red+ ',' +green+ ',' +blue+ ')'; 
       ctx.fillRect(wireWidth*i,wireHeight*j,wireWidth,wireHeight); 
      } 
     } 

    } 
}

來源

2012-03-02 user1011444

當/怎麼叫這個存在的功能？「imax」變量來自哪裏？ – ManseUK 2012-03-02 12:06:43

imax和jmax是全局變量，我用這種方式定義它們：'var imax = Math.floor（$（window）.width（）/ wireWidth）; var jmax = Math.floor（$（window）.height（）/ wireHeight）;'其中'wire'實際上是一個'像素'，其大小由全局變量定義 – user1011444 2012-03-02 14:34:21

在繪製畫布之前，您需要等待頁面初始化之前。

呼叫功能body.onload或稍微。

攔截警報瀏覽器提供了足夠的時間來初始化，除非你與10ms的反應速度的機器人:-D

來源

2012-03-02 12:09:59 kirilloid

這也是我的第一個想法，警報正在創建延遲，確保dom被加載。相反，函數只能在加載dom之後調用。 – Evert 2012-03-02 12:12:35

從什麼時候'canvas'需要DOM準備好？ http://jsfiddle.net/niklasvh/9xxM8/ – Niklas 2012-03-02 12:15:21

哎呀對不起，我忘了在我的HTML頁面中提到，函數imageReader（this）在我的圖像加載完成後調用，並且在此函數結束時實際功能繪製（imageData） – user1011444 2012-03-02 14:28:04

畫布未被繪製html5（javascript，關閉）

回答

相關問題