1

キャンバスの中央にバーを描画しようとしています。バーが水平方向に中央に配置されることを期待しますが、左側にわずかにパディングされているだけです。なにが問題ですか？

CSS:

#my-canvas {
    border: 1px solid #ffffff;
    height: 100px;
    width: 100px;
}

HTML:

<canvas id="my-canvas"></canvas>

JavaScript:

var bar = document.getElementById("my-canvas");
var barContext = rejectedBar.getContext("2d");

var canvasWidth = bar.scrollWidth;
var canvasHorizontalCenter = canvasWidth / 2;
var canvasHeight = bar.scrollHeight;
var barWidth = 50;
var barHorizontalCenter = barWidth / 2;

barContext.fillStyle = "#781108";
barContext.fillRect(canvasHorizontalCenter - barHorizontalCenter, 0, barWidth, 100);
4

1 に答える 1

4

CSS を使用してキャンバスを 100 ピクセル幅にしても、描画用のキャンバスの概念的な幅には影響しません。canvas タグの "width" と "height" プロパティを使用できるように設定します。

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

これを指定しない場合、デフォルトは幅 300、高さ 150 です。

于 2013-08-20T19:33:54.603 に答える