Javascript 在画布中绘制多个贝塞尔路径_Javascript_Canvas

Javascript 在画布中绘制多个贝塞尔路径

javascript canvas

Javascript 在画布中绘制多个贝塞尔路径,javascript,canvas,Javascript,Canvas,我最近开始在画布上画画。我想画一个圆形的矩形，里面有一个圆，但是这个圆与前面的路径相连。我怎样才能画出这个，这样我就不会让两个图形用一条线连接起来 <html> <div class="canvas-container"> <canvas id="mistakenBezier">canvas not supported</canvas> <script type="text/javascript">

我最近开始在画布上画画。我想画一个圆形的矩形，里面有一个圆，但是这个圆与前面的路径相连。我怎样才能画出这个，这样我就不会让两个图形用一条线连接起来

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


不支持画布
var canvas=document.getElementById（“mistakenBezier”）；
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
//投入：
变量x=20，y=20；//矩形原点
var w=160，h=120；//矩形大小
var r=10；//矩形角半径
//绘制圆形矩形：
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.bezierrcurveto（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（）；
//画圈
//ctx.beginPath（）；
//ctx.moveTo（x，y+h-r）；
弧（x+r+10，y+r+10，r，0，数学π*2，真）；
//ctx.closePath（）；
ctx.stroke（）；
}

您看到的线是因为您需要移动到绘图圆弧的起点，或者您将从当前位置绘制一条线，将圆弧设置为开始绘图的位置

线路ctx.moveTo（x+r+10+r，y+r+10）；需要高于您的arc呼叫

一条长路径中的示例

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


不支持画布
var canvas=document.getElementById（“mistakenBezier”）；
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
//投入：
变量x=20，y=20；//矩形原点
var w=160，h=120；//矩形大小
var r=10；//矩形角半径
//绘制圆形矩形：
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.bezierrcurveto（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.moveTo（x+r+10+r，y+r+10）；
弧（x+r+10，y+r+10，r，0，数学π*2，真）；
ctx.stroke（）；
}

您也可以在矩形的末端进行笔划，然后像这样开始圆的新路径

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


不支持画布
var canvas=document.getElementById（“mistakenBezier”）；
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
//投入：
变量x=20，y=20；//矩形原点
var w=160，h=120；//矩形大小
var r=10；//矩形角半径
//绘制圆形矩形：
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.bezierrcurveto（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.beginPath（）
弧（x+r+10，y+r+10，r，0，数学π*2，真）；
ctx.stroke（）；
}

您可能想看看。您最好使用

arc

命令，而不是

bezierCurveTo

命令。