Html 5画布圆弧问题 - 圆弧被扭曲

我正在使用以下代码使用html5画布绘制圆弧。Html 5画布圆弧问题 - 圆弧被扭曲

这是我的代码

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" width="1000" height="550" style="padding-top:20px;border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(293.5, 183.4375, 186.70352183177323, 4.71238898038469, 6.8067840827778845); 
    ctx.arc(293.5, 190.4375, 93.40238454336179, 6.8067840827778845, 4.71238898038469, true); 
    ctx.closePath(); 
    ctx.strokeStyle = "white"; 
    ctx.lineWidth = 1; 
    ctx.fillStyle = "red"; 
    ctx.fill(); 
    ctx.stroke(); 
</script> 

</body> 
</html>

这是弧形的外观。如果仔细观察，外弧的左上端有一个轻微的平坦表面。谁能告诉我为什么会发生这种情况？为什么弧线不平滑？

来源

2016-08-23 ASR

第二弧具有人造丝比中心y位置更大。它超出了画布元素。

你可以看到这里的变化：https://jsfiddle.net/o1rdkj8u/

ctx.arc(293.5, 183.4375, 183.43753/*186.70352183177323*/, 4.71238898038469, 6.8067840827778845); 
ctx.arc(293.5, 183.4375/*190.4375*/, 93.40238454336179, 6.8067840827778845, 4.71238898038469, true);

此外，您arcq不具有相同的中心。如果这不是你想要的，请看看它。

来源

2016-08-23 16:36:54

笔画绘制在你的弧的半内和半外。

弧线的半外侧部分被画布的顶部切断。

所以，如果你想中风完全适合画布内，然后确保你减去上下文线宽的一半。

radius = radius - context.lineWidth/2;

因此，对于您的弧线：

ctx.arc(
    293.5, 183.4375, 
    186.70352183177323 - ctx.lineWidth/2,  // subtract half linewidth 
    4.71238898038469, 6.8067840827778845 
);

来源

2016-08-23 16:38:32 markE

Html 5画布圆弧问题 - 圆弧被扭曲

回答

相关问题