帆布不按預期工作

我正在嘗試一個腳本來繪製方格紙，從畫布中的網格，從潛入到html5。結果應該繪製一個邊10px的正方形網格，但我得到的大小約爲20px，而不是確切的正方形。
下面是代碼，`帆布不按預期工作

<html> 
     <head>  
      <style> 
    body{ 
     margin: 20px 20px 20px 20px; 
    } 

    canvas{ 
     width: 500px; 
     height: 375px; 
     border: 1px solid #000; 
    } 
    </style> 
    <script type="text/javascript"> 
     function activate(){ 
      var canvas =document.getElementById("exp"); 
      var context = canvas.getContext("2d"); 

      for (var x=0.5;x<500;x+=10){ 
       context.moveTo(x,0); 
       context.lineTo(x,375); 
       console.log(x); 
      } 

      for (var y=0.5;y<375;y+=10){ 
       context.moveTo(0,y); 
       context.lineTo(500,y); 
      } 

      context.strokeStyle="#000"; 
      context.stroke(); 
     } 
    </script> 
</head> 

<body> 
    <canvas id="exp"><script type="text/javascript">activate();</script></canvas> 
</body 
    </html>

這是輸出：
canvas rendered
而實際輸出應該是：
actual canvas
注：我並不擔心色差。我不明白的是爲什麼2行之間的空間大約是20px（通過firefox上的測量工具檢查）而不是10px。
此外，在打印x的值時，它會給出正確的值（即每次增加10）。

來源

2012-02-18 Likhit

你錯過了''''''' – 2012-02-18 10:10:14

您不能使用css 來設置畫布的大小，您應該在DOM的屬性中進行設置。

<canvas width="100" height="200"></canvas>

來源

2012-02-18 10:09:06 Kevin

亞工作，但我不明白如何改變線寬的CSS？另外，正如你所說的，css沒有被應用到畫布上，但畫布仍然獲得了502x377px的大小（正好）。爲什麼？ – Likhit 2012-02-18 10:20:33

CSS只是改變樣式的寬度和高度，而不是畫布的寬度和高度。畫布就像圖像一樣，您設置圖像的樣式寬度和高度不會改變圖像的實際大小。 – Kevin 2012-02-18 10:31:56

Javascript可以爲您計算。只有設置參數：

HTML：

<canvas id="exp"></canvas>

JS：

function activate(id, xcount, ycount, width, color) { 
    var canvas = document.getElementById(id); 
    var context = canvas.getContext("2d"); 

    canvas.width = xcount * width + 1; 
    canvas.height = ycount * width + 1; 

    for (var x = 0.5; x < canvas.width; x += width) { 
     context.moveTo(x, 0); 
     context.lineTo(x, canvas.height); 
    } 

    for (var y = 0.5; y < canvas.height; y += width) { 
     context.moveTo(0, y); 
     context.lineTo(canvas.width, y); 
    } 

    context.strokeStyle = color; 
    context.stroke(); 
} 
activate("exp", 37, 50, 10, "#ccc");

另見this example。

來源

2012-02-18 10:36:52 scessor

帆布不按預期工作

回答

相關問題