HTML 5画布和绘制圆形

Question

3

我正在尝试理解为什么我的圆不在HTML 5 Canvas的中心位置。

我想在画布的中央创建一个圆。

画布如下：

宽度：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)，那么它会显示在中间。

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

- WannaBDeveloper

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1693593 · Accepted Answer

您没有展示如何设置画布的实际宽度和高度，但如果中心点始终为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);