在画布中绘图不居中答案

【问题标题】：Drawing in canvas does not center在画布中绘图不居中
【发布时间】：2013-08-22 23:57:50
【问题描述】：

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

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

【问题讨论】：

什么是rejectedBar？
Fixed default JSFiddle
@Rob 我简化了变量的名称，忘记了这两个。已编辑。
你也可以设置 context.canvas 的宽度/高度。 See here

标签： javascript html css

【解决方案1】：

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

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

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

【讨论】：

要添加，您可以在画布上绘制，然后应用一个更改尺寸的类，画布将像img 标签一样缩放。