在画布上绘制多条贝塞尔路径

问题描述：

我最近开始在画布上绘画。我想绘制一个圆形的矩形，里面有一个圆形，但圆形连接到前一个路径。我怎样才能绘制出这样的图像，这样我就不会将两个图形都连接起来了？在画布上绘制多条贝塞尔路径

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

你可能想看看[这个问题]（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>

在画布上绘制多条贝塞尔路径

相关推荐