在画布中绘图不居中

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

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

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

如果您没有指定，则默认为300宽150高。