在畫布上繪製多條貝塞爾路徑

我最近開始在畫布上繪畫。我想繪製一個圓形的矩形，裏面有一個圓形，但圓形連接到前一個路徑。我怎樣才能繪製出這樣的圖像，這樣我就不會將兩個圖形都連接起來了？在畫布上繪製多條貝塞爾路徑

<html> 
<div class="canvas-container"> 
    <canvas id="mistakenBezier">canvas not supported</canvas> 
    <script type="text/javascript"> 
     var canvas = document.getElementById("mistakenBezier"); 
     if(canvas.getContext){ 
     var ctx = canvas.getContext('2d'); 

      //inputs: 
      var x = 20, y = 20;  //rectangle origin 
      var w = 160, h = 120; //rectangle size 
      var r = 10;   //rectangle corner radius 
      //draw rounded rect: 
      ctx.beginPath(); 
      ctx.moveTo(x,y+h-r); 
      ctx.lineTo(x,y+r);  ctx.bezierCurveTo(x,y,x+r,y,x+r,y); 
      ctx.lineTo(x+w-r,y); ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r); 
      ctx.lineTo(x+w,y+h-r); ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h); 
      ctx.lineTo(x+r,y+h); ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r); 
      ctx.stroke(); 
      //ctx.closePath(); 

      //draw circle 
      //ctx.beginPath(); 
      //ctx.moveTo(x,y+h-r); 
      ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true); 
      //ctx.closePath(); 
      ctx.stroke(); 


     } 
    </script> 
</div> 
</html>

來源

2011-05-07 nacho4d

你可能想看看[這個問題]（http://stackoverflow.com/q/1255512/102441）。你最好使用'arc'命令而不是'bezierCurveTo'。 – Eric 2011-05-07 17:45:49

線您看到的是，因爲你需要MOVETO圓弧繪圖的起點，或者你會畫一條線形成當前位置到你設置你弧線開始繪製。

行ctx.moveTo（x + r + 10 + r，y + r + 10）;需要高於你的弧線電話。

實施例在一個長的路徑

<html> 
<div class="canvas-container"> 
    <canvas id="mistakenBezier">canvas not supported</canvas> 
    <script type="text/javascript"> 
    var canvas = document.getElementById("mistakenBezier"); 
    if(canvas.getContext){ 
    var ctx = canvas.getContext('2d'); 

     //inputs: 
     var x = 20, y = 20;  //rectangle origin 
     var w = 160, h = 120; //rectangle size 
     var r = 10;   //rectangle corner radius 
     //draw rounded rect: 
     ctx.beginPath(); 
     ctx.moveTo(x,y+h-r); 
     ctx.lineTo(x,y+r);  ctx.bezierCurveTo(x,y,x+r,y,x+r,y); 
     ctx.lineTo(x+w-r,y); ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r); 
     ctx.lineTo(x+w,y+h-r); ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h); 
     ctx.lineTo(x+r,y+h); ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r); 

     //draw circle 
     ctx.moveTo(x+r+10+r,y+r+10); 
     ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true);  
     ctx.stroke(); 


     } 
    </script> 
    </div> 
</html>

還可以行程在矩形的末端，然後開始對像這樣的圓的新路徑。

<html> 
<div class="canvas-container"> 
<canvas id="mistakenBezier">canvas not supported</canvas> 
<script type="text/javascript"> 
    var canvas = document.getElementById("mistakenBezier"); 
    if(canvas.getContext){ 
    var ctx = canvas.getContext('2d'); 

    //inputs: 
    var x = 20, y = 20;  //rectangle origin 
    var w = 160, h = 120; //rectangle size 
    var r = 10;   //rectangle corner radius 
    //draw rounded rect: 
    ctx.beginPath(); 
    ctx.moveTo(x,y+h-r); 
    ctx.lineTo(x,y+r);  ctx.bezierCurveTo(x,y,x+r,y,x+r,y); 
    ctx.lineTo(x+w-r,y); ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r); 
    ctx.lineTo(x+w,y+h-r); ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h); 
    ctx.lineTo(x+r,y+h); ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r); 
    ctx.stroke(); 

    //draw circle 
    ctx.beginPath() 
    ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true);  
    ctx.stroke(); 

    } 
</script> 
</div> 
</html>

來源

2011-05-07 17:28:55

在畫布上繪製多條貝塞爾路徑

回答

相關問題