javascript - 在画布中绘图不居中

Question

我正在尝试在画布的中心绘制一个条形图。我希望条形图水平居中，但它只是稍微向左填充。怎么了？

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);

Answer 1

通过 CSS 使您的画布为 100 像素宽不会影响用于绘图目的的画布的概念宽度。要设置它，您可以使用画布标签上的“宽度”和“高度”属性。

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

如果您不指定，默认为 300 宽 x 150 高。