1

円を描く必要がある非常に単純なコードがありますが、円のようには見えず、正しい位置にもありません。座標はすべて多少ずれています。キャンバスは に設定されていstyle="width: 600px; height: 600px;"ます。Chrome と Safari で試してみましたが、見た目は同じなのでブラウザのバグではありません。私の質問は次のとおりです（おそらく両方に1つの答えがあります）：

  1. 中心を (100, 100) に置いている場合、なぜ円は左の境界線から等距離になく、上の境界線から離れているのでしょうか?
  2. (300, 300) ポイントがキャンバスの外にあり、中心にないのはなぜですか?

コード：

var context = document.getElementById('c').getContext("2d");
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(100, 100, 30, 0, 2 * Math.PI, true);
context.stroke();

見た目: ここに画像の説明を入力

編集

コメントによると、書き込み<canvas id="myCanvas" style="width: 578px; height: 200px;"></canvas>がこの問題の原因であり、書き込み<canvas id="myCanvas" width="578" height="200"></canvas>が解決することがわかりました。誰でも理由を知っていますか？

4

2 に答える 2

3

これはHTML5 Canvas 仕様に記載されています。

HTML 属性 はキャンバスの描画領域を記述し、デフォルトはwidth="x" height="y"です。副作用として、キャンバスのデフォルトの表示サイズを記述します。300 × 150 px

キャンバスに設定されたCSS プロパティ width: x; height: y;は、その描画領域を拡大/縮小できますが、そのサイズは変更しません。

あなたの場合、ブラウザーはデフォルトの描画領域 ( 300 × 150 px) を拡大して、指定された CSS に合わせ600 × 600 pxます。

于 2013-01-01T15:28:55.903 に答える
2

次の例は、キャンバスに円を描く方法を示しています: http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

また、次のように属性としてではなく、canvas 要素にwidthおよび属性を設定する必要があります。heightstyle

<canvas id="c" width="600" height="600" style="background-color:yellow;"></canvas>
于 2013-01-01T15:19:09.607 に答える