繪製在JavaScript中弧圓時如何刪除HTML畫布半徑線？

這是我的HTML代碼來繪製一個笑臉。在我嘗試了之後，我看到有一些額外的線條。在半徑的地方有眼線。也爲了嘴巴。如何刪除這三條半徑線？繪製在JavaScript中弧圓時如何刪除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>

來源

2016-01-29 wizardo

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

來源

2016-01-29 04:29:43 tgtb

謝謝你的答案。 :) – wizardo

我看到你的問題，並找到你的答案。我開始與你的座標玩耍，並發現你正在使用你的「.moveTo」語句的座標是錯誤的。你有代碼告訴程序開始畫圓的中心 - 第一水平造成線路從中心到圓弧，再繞到完成圈本身。我已經修改了你的.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>

保持冷淡的士兵

來源

2016-01-29 05:11:24

非常感謝你的幫助。 :) – wizardo

繪製在JavaScript中弧圓時如何刪除HTML畫布半徑線？

回答

相關問題