キャンバスが意図したとおりに動作しない

私はキャンバス上にグリッドのようなグラフ用紙を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行の間のスペースが10pxではなく20px（firefox上の測定ツールでチェックされているように）である理由です。
また、xの値を印刷すると、正しい値（毎回10ずつインクリメント）が得られます。

出典

2012-02-18 Likhit

' ' –

あなたはCSSのでキャンバスのサイズを設定することはできません。DOMの属性に設定する必要があります。

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

出典

2012-02-18 10:09:06 Kevin

に'> 'がありますが、CSSが線幅をどのように変更したのか分かりません。また、あなたが言ったように、CSSはキャンバスに適用されませんでしたが、キャンバスはまだ502x377px（正確に）のサイズを取得しました。どうして？ – Likhit

CSSはスタイルの幅と高さを変更しますが、キャンバスの幅と高さは変更しません。キャンバスをイメージのように配置すると、イメージのスタイルの幅と高さを設定しても、イメージの実際のサイズは変わりません。 – Kevin

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

キャンバスが意図したとおりに動作しない

答えて

関連する問題