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

时间:2016-01-29 03:31:16

标签: javascript html canvas

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

CLICK HERE FOR OUTPUT IMAGE

    

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

3 个答案:

答案 0 :(得分:2)

您的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();
    }
}

答案 1 :(得分:0)

我看到了你的问题,找到了答案。我开始玩你的坐标,发现你在&#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>

保持冷淡的士兵

答案 2 :(得分:0)

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

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

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();

祝你好运!