HTML 5个Canvas和绘制圆

Question

我想知道为什么我的圈子里是不是在我的画布在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），那么它示出了在中间。

我只是希望有人能阐明为什么原来的代码不起作用一点光。

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