如何在画布上画圆圈？
Rob*_*nie 13 javascript html5 canvas
我使用javascript和画布绘制数学设计的刻度(用于测量扭矩,它包括牛顿米和英尺 - 磅).我一直在使用三角函数定位我的刻度线arc,并自然地使用绘制弧形线.问题出现在他们需要排队的时候,但是有一些奇怪的失真.然后我绘制了一个非常大的圆圈并将其与GIMP中的圆形选择进行比较,并且存在失真.圆圈周围每45度一致,但在这些节点之间,画布绘制的圆圈向外偏离,就像八角形可以向外圆形太远以近似圆形.
为什么会出现这些扭曲？如何在画布上绘制一个真正的圆形圆圈？
这是我用来生成扭曲圆圈的代码.
<!DOCTYPE html>
<html>
<body>
<canvas width=8000 height=8000 id='myCanvas'></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(4000, 4000, 3200, 0, Math.PI*2, false);
context.lineWidth = 1;
context.strokeStyle = '#ff0000';
context.lineCap = 'square';
context.stroke();
</script>
</body>
</html>
这可能不是最小的,我不知道context.lineCap它的相关性,但它是基于此代码的遗迹.以下屏幕截图显示了GIMP绘制的圆与Chrome绘制的圆之间的区别
hex*_*wab 10
这是Chromium Bug#164241(声明已修复,虽然修复程序可能尚未解决).简短的回答是:Chrome 使用复合Bezier曲线近似圆.
我无法在Chromium(43.0.2357.130,Ubuntu)上复制这个,但它确实发生在Firefox 39上,尽管我找不到类似的Firefox错误报告.事实上,每90度(不是45度,至少不适合我)是正确的,这表明圆圈正在被4条曲线近似,因为曲线端点保证是正确的.
幸运的是,有一个简单的解决方法:创建一条包含4条以上曲线的路径.对于您正在使用的半径,8或甚至6应该足够,但如果您想要安全地使用它,您可以使用更多.或者你可以增加曲线的数量作为半径的函数,尽管计算最佳函数(对于给定半径r将产生精确圆的最小n)是非平凡的.
context.beginPath();
var n=8; // 4 is the default behaviour. higher is better, also slower
for (var i=0; i<n; i++) {
context.arc(4000, 4000, 3200, Math.PI*2*i/n, Math.PI*2*(i+1)/n, false);
}
context.stroke();
另见这个问题.
(是的,lineCap是一个红鲱鱼.)