我有一个非常简单的代码应该绘制一个圆圈，但它看起来不像一个，而不是在正确的位置坐标都有所偏移。画布设置为style="width: 600px; height: 600px;"。我在Chrome和safari上试过它 - 看起来相同，所以它不是浏览器错误。所以我的问题是（有可能是两个一个答案）：为什么画布圆圈看起来不像一个圆圈？

如果我把中心在（100，100），为什么是圆没有从左边边框的距离相等，它是从顶部边界？
为什么（300,300）指出画布而不是中心？

代码：

var context = document.getElementById('c').getContext("2d"); 
context.fillStyle = 'black'; 
context.fill(); 
context.beginPath(); 
context.arc(100, 100, 30, 0, 2 * Math.PI, true); 
context.stroke();

如何看起来： enter image description here

编辑

据我发现，写<canvas id="myCanvas" style="width: 578px; height: 200px;"></canvas>是造成这个问题，写<canvas id="myCanvas" width="578" height="200"></canvas>解决了评论它。有人知道为什么

来源

2013-01-01 Ramzi Kahil

您是否在'

@DCoder我有这样的代码：'' –

@MaggiQall Why 3？ PI是半个圆（等于180度）。所以2 * PI是一个整圆 - 360度 –

这在HTML5 Canvas spec中有记录。

的HTML属性width="x" height="y"描述绘图画布和默认的区域到300 × 150 px。作为一个副作用，它们描述了画布的默认可见尺寸。

该CSS属性width: x; height: y;设置在画布上可以拉伸/紧凑的绘图区域，但他们不改变它的大小。

对于您的情况，浏览器拉伸默认绘图区域（300 × 150 px）以满足给定的CSS 600 × 600 px。

来源

2013-01-01 15:28:55 DCoder

这个例子说明了如何在画布上绘制一个圆：http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

此外，您还需要设置画布元素上width和height属性，而不是作为一个style属性，像这样：

<canvas id="c" width="600" height="600" style="background-color:yellow;"></canvas>

来源

2013-01-01 15:19:09 udidu

是的，我刚刚发现，根据评论。你有什么想法，为什么？ –

转到此链接：http://stackoverflow.com/questions/2588181/canvas-is-stretch-when-using-css-but-normal-with-old-width-and-height-proper – udidu

为什么画布圆圈看起来不像一个圆圈？

编辑

回答

相关问题