Question

这是我的html代码，可以画出笑脸。在我尝试之后，我看到有一些额外的线条。在半径的位置有眼睛的线条。对于嘴巴也是如此。如何删除这三条半径线？

</head>
<body onclick="line();">
    <canvas id="canvas" width="1000" height="500"></canvas>
    <script>
        function line()
        {
            var canvas = document.getElementById('canvas');
            if(canvas.getContext)
                {
                    var lines = canvas.getContext('2d');
                    lines.beginPath();
                    lines.arc(275,275,150,0,Math.PI*2,true);
                    lines.moveTo(280, 275);
                    lines.arc(275, 275, 100, 0, Math.PI, false);
                    lines.moveTo(210,220);
                    lines.arc(210, 220, 20, 0, Math.PI*2, true);
                    lines.moveTo(350, 220);
                    lines.arc(350, 220, 20, 0, Math.PI*2, true);
                    lines.stroke();                
                }
        }
    </script>
</body>

Answer 1

您的moveTo()来电将转到每个弧线的中心点。弧实际上是从周长开始绘制的，因此在开始弧之前，你的路径从中心到周边。

要解决此问题，只需将moveTo()调用更改为弧上最右边的点（这是绘图开始的位置）。这是我的修复：

function line()
{
    var canvas = document.getElementById('canvas');
    if(canvas.getContext)
    {
        var lines = canvas.getContext('2d');
        lines.beginPath();
        lines.arc(275,275,150,0,Math.PI*2,true);
        lines.moveTo(375, 275);
        lines.arc(275, 275, 100, 0, Math.PI, false);
        lines.moveTo(230,220);
        lines.arc(210, 220, 20, 0, Math.PI*2, true);
        lines.moveTo(370, 220);
        lines.arc(350, 220, 20, 0, Math.PI*2, true);
        lines.stroke();
    }
}

Answer 2

我看到了你的问题，找到了答案。我开始玩你的坐标，发现你在＆＃34; .moveTo＆＃34;中使用的坐标。陈述错了。您所拥有的代码告诉程序开始在中心绘制圆圈 - 首先从中心到圆弧水平线形成一条线，然后围绕圆形本身完成圆形。我修改了你的.moveTo坐标，从圆弧开始：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body onclick="line();">
    <canvas id="canvas" width="1000" height="500"></canvas>
    <script>
        function line()
        {
            var canvas = document.getElementById('canvas');
            if(canvas.getContext)
                {
                    var lines = canvas.getContext('2d');
                    lines.beginPath();
                    lines.arc(275,275,150,0, 2*Math.PI,true);
                    lines.moveTo(280, 275);
                    lines.arc(275, 275, 100, 0, Math.PI, false);
                    lines.moveTo(230,220);
                    lines.arc(210,220,20,0, Math.PI*2, true);
                    lines.moveTo(370, 220);
                    lines.arc(350, 220, 20, 0, Math.PI*2, true);
                    lines.stroke();                
                }
        }
    </script>
</body>
</html>

保持冷淡的士兵

Answer 3

现有答案要求用户知道弧的起始坐标。在许多情况下，这是一个过于繁重的要求。

一个更简单的解决方案是完成您正在处理的路径，然后开始新的路径。你可以这样做：

theContext.stroke();
theContext.closePath();
theContext.beginPath();

例如：

lines.beginPath();
lines.arc(275,275,150,0,Math.PI*2,true);
lines.stroke();
lines.closePath();
lines.beginPath();
lines.arc(275, 275, 100, 0, Math.PI, false);
lines.stroke();
lines.closePath();
lines.beginPath();
lines.arc(210, 220, 20, 0, Math.PI*2, true);
lines.stroke();
lines.closePath();
lines.beginPath();
lines.arc(350, 220, 20, 0, Math.PI*2, true);
lines.stroke();

祝你好运！

如何在javascript中绘制带圆弧的圆圈时删除html画布中的半径线？

3 个答案: