HTML 5 画布和画圆

【问题标题】：HTML 5 Canvas and Draw CircleHTML 5 画布和画圆
【发布时间】：2014-04-02 08:21:27
【问题描述】：

我试图理解为什么我的圈子不在 HTML 5 的画布中间。我正在尝试在画布中间创建一个圆圈。

画布如下：

画布：宽度：600 身高：300

然后我用下面的代码画一个圆：

context.beginPath();
context.fillStyle = '#424';
context.arc(300, 150, 10, 0, 2*Math.PI, false);
context.fill();
context.closePath();

圆圈画在右下角。

现在，如果我将 (x, y) 更改为 (150, 75)，那么它会显示在中间。

我只是希望有人能解释一下为什么原始代码不起作用。

【问题讨论】：

【解决方案1】：

您没有显示如何设置画布的实际宽度和高度，但如果中心点始终为 150、75，则画布始终为默认大小，这意味着您可能正在使用 css 而不是设置大小直接在元素上。

试试这样的：

<canvas id="myCanvas" width=600 height=300></canvas>

在 JavaScript 中：

canvas.width = 600;   // don't use canvas.style.*
canvas.height = 300;

您也可以这样设置圆弧的中心（使其自动采用中心）：

context.arc(context.canvas.width * 0.5, context.canvas.height * 0.5,
            10, 0, 2*Math.PI, false);

【讨论】：