javascript - 在 Canvas 中绘制多条贝塞尔曲线路径-6ren

javascript - 在 Canvas 中绘制多条贝塞尔曲线路径

转载作者：行者123 更新时间：2023-11-30 06:04:37

我最近开始在 Canvas 上画画。我想绘制一个圆 Angular 矩形，里面有一个圆圈，但圆圈连接到以前的路径。我怎样才能画这个，这样我就不会用一条线连接两个图形？

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

最佳答案

你看到的线是因为你需要移动到你绘图的弧的起点，否则你将从当前位置画一条线到你设置的弧开始绘图的位置。

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

关于javascript - 在 Canvas 中绘制多条贝塞尔曲线路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5922732/

文章推荐： javascript - 如何有效地实现客户端 javascript 模板部分？

文章推荐： javascript - native Javascript 页面加载消息？

文章推荐： JavaScript 远程点击

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 Canvas 中绘制多条贝塞尔曲线路径