帆布不按预期工作

我正在尝试一个脚本来绘制方格纸，从画布中的网格，从潜入到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

帆布不按预期工作

回答

相关问题