Question

我使用以下代码使用html5画布绘制弧。

这是我的代码

<!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>

这是电弧的外观。如果仔细观察，外弧的左上端具有轻微的平坦表面。谁能告诉我为什么会这样？为什么弧线不平滑？

Answer 1

第二个弧的人造丝大于中心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没有相同的中心。如果它不是你想要的，请看一下。

Answer 2

在弧线的半内侧和半侧外画出笔划。

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

因此，如果您希望笔划完全适合画布，请确保减去上下文的一半线宽。

radius = radius - context.lineWidth/2;

所以你的弧：

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

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

2 个答案: