HTML5画布弧形问题-弧形变形_Html_Html5 Canvas

HTML5画布弧形问题-弧形变形

html html5-canvas

HTML5画布弧形问题-弧形变形,html,html5-canvas,Html,Html5 Canvas,我使用以下代码使用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>

我使用以下代码使用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>


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（293.5183.4375、186.70352183177323、4.71238898038469、6.8067840827778845）；
ctx.arc（293.5190.4375，93.40238454336179，6.8067840827778845，4.71238898038469，真）；
ctx.closePath（）；
ctx.strokeStyle=“白色”；
ctx.lineWidth=1；
ctx.fillStyle=“红色”；
ctx.fill（）；
ctx.stroke（）；

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

第二个弧的人造丝大于中心y位置。它不属于canvas元素

您可以在此处看到更改：

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

第二个圆弧的人造丝大于中心y位置。它不属于canvas元素

您可以在此处看到更改：

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

笔划一半在弧内，一半在弧外绘制

你的弧的一半外侧部分被画布的顶部切断

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

radius = radius - context.lineWidth/2;

因此，对于您的arc：

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

笔划一半在弧内，一半在弧外

你的弧的一半外侧部分被画布的顶部切断

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

radius = radius - context.lineWidth/2;

因此，对于您的arc：

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