HTML 5画布和绘制圆

时间:2014-03-01 04:51:58

标签: javascript html css html5 canvas

我试图理解为什么我的圈子不在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),那么它会显示在中间。

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

1 个答案:

答案 0 :(得分: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);