當在多個畫布上繪圖時出現奇怪的行爲

基本上，我試圖創建一個跨越多個畫布的網格，但我在第一個和最後一個上都會出現奇怪的行爲。筆劃顏色和間距已更改。我不明白它是如何發生的。以下是相關的代碼，請點擊鏈接查看它的行動。（該網站是正在進行的工作） http://www.gjar-po.sk/~hudak9c/test3/當在多個畫布上繪圖時出現奇怪的行爲

var canvasCount = document.getElementsByTagName("canvas").length; 

if (canvasCount > 0) { 
    for (var i = 0; i < canvasCount; i++) { 
    var canvas = document.getElementsByTagName("canvas")[i]; 

    if (canvas.getContext("2d")) { 
     var can = canvas.getContext("2d"); 

     can.beginPath(); 

     for (var x = 5; x < 640; x += 20) { 
     can.moveTo(x, 0); 
     can.lineTo(x, canvas.height); 
     } 

     for (var y = 5; y < canvas.height; y += 20) { 
     can.moveTo(0, y); 
     can.lineTo(canvas.width, y); 
     } 

     can.lineWidth = 1; 
     can.strokeStyle = "#000"; 
     can.stroke(); 
    } else { 
     alert("getContext fail");  
    } 
    } 
}

編輯：我設法解決這個問題。這是由我（顯然）通過style.width和style.height設置畫布的寬度和高度，而不是通過canvas.width和canvas.height，這使得它們從默認尺寸伸展/縮小而不是調整大小。

來源

2012-09-02 FreHu

嘗試設置按標籤的寬度和高度的畫布屬性width和height這樣的：

<canvas width="640" height="50">

不受style屬性。這是非常重要的。因爲當您設置style屬性並指向width和height屬性時，那麼您的畫布的默認實際尺寸爲和height只是延伸至您的新尺寸。

來源

2012-09-02 16:19:27

當在多個畫布上繪圖時出現奇怪的行爲

回答

相關問題