рисование более одного безье-го пути на холсте - PullRequest
Новая
       3

рисование более одного безье-го пути на холсте

2 голосов
/ 07 мая 2011

Я недавно начал рисовать на холсте. Я хочу нарисовать прямоугольник со скругленными углами с кругом внутри него, но круг будет связан с предыдущим путем. Как я могу нарисовать это так, чтобы обе фигуры не были соединены линией? 

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

1 Ответ

1 голос
/ 07 мая 2011

Линия, которую вы видите, потому что вам нужно переместиться в начальную точку дуги вашего чертежа, или вы нарисуете линию из текущего местоположения в том месте, где вы установили свою дугу, чтобы начать рисование.

строка 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>​
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...