如何创建始终打开到固定点的弧

2 回答

• 0

  The simplest way is to adjust the starting & ending angles of the arc command.

  你可以绘制一系列弧形来形成你的花朵 .

  提示：如果您希望您的花瓣不那么圆，更弯曲，您可以使用 quadraticCurveTo 而不是弧形来绘制花瓣的外部 .

  祝你的项目好运！

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  var cw=canvas.width;
  var ch=canvas.height;
  
  var cx=150;
  var cy=150;
  var radius=50;
  var PI=Math.PI;
  var startAngle=0-PI/8;
  var sweepAngle=PI/4;
  var nextTime=0;
  var delay=250;
  
  requestAnimationFrame(animate);
  
  function draw(){
  
    ctx.clearRect(0,0,cw,ch);
  
    ctx.beginPath();
    ctx.arc(cx,cy,5,0,PI*2);
    ctx.closePath();
    ctx.fill();
  
    ctx.beginPath();
    ctx.arc(cx,cy,radius,startAngle,startAngle+sweepAngle);
    ctx.stroke();
  
  }
  
  function animate(time){
    requestAnimationFrame(animate);
    if(time>nextTime){
      draw();
      startAngle+=PI*2/30;
      nextTime+=delay;
    }
  }
  

  body{ background-color: ivory; padding:10px; }
  #canvas{border:1px solid red;}
  

  <canvas id="canvas" width=300 height=300></canvas>
  

  [ Addition based on more information ]

  是的，我想你已经拥有了！

  从鼠标位置 mcx,mcy 开始 .

  定义较小的圆心点与鼠标位置的角度 radianAngle .

  定义小中心点远离鼠标中心点的距离 radius .

  计算小圆的中心点：

  var scx = mcx + radius*Math.cos(radianAngle);
  var scy = mcy + radius*Math.sin(radianAngle);
  

  定义较小圆圈的半径 smallRadius .

  在较小的弧 sweepAngle 上定义所需的总扫描角度 .

  在小圆上定义圆弧的起始和结束角度 . 这实际上很简单，因为您希望鼠标点处的小弧度为"point" . 提示：小弧的中心必须始终位于 radianAngle 的中点 . 因此， startingAngle = ( radianAngle - sweepAngle/2 .

  所以最后你的“指向”鼠标的小角度变为：

  ctx.arc( scx,scy, smallRadius, startingAngle, startingAngle+sweepAngle );
  

  干杯!

  回复于 2024-05-02T13:34:56+08:00
• 2

  Adding 因为：

  $(document).ready(function() {
        var canvas = $('#canvas');
  
        function getPosition(mouseEvent) {
          var x, y;
          x = mouseEvent.clientX;
          y = mouseEvent.clientY;
          return {
            X: x - canvas.offset().left,
            Y: y - canvas.offset().top
          };
        }
  
        $('#canvas').mousemove(function(e) {
          var origin = {
            x: 325,
            y: 100
          };
          var posit = getPosition(e)
          var degrees = Math.PI /
            180;
          var plotR = {
            X: 0,
            Y: 0
          };
          var radius = 15;
          var curveDeg = 65;
          var context = $('#canvas').get(0).getContext('2d');
  
          if (posit.X >= origin.x && posit.Y <= origin.y) {
            quadrant = 1;
          } else if (posit.X >= origin.x && posit.Y >= origin.y) {
            quadrant = 2;
          } else if (posit.X < origin.x && posit.Y >= origin.y) {
            quadrant = 3;
          } else {
            quadrant = 4;
          }
  
          deltaY = posit.Y - origin.y;
          deltaX = posit.X - origin.x;
  
          if (deltaX == 0) {
            distance = deltaY;
            plotR.X = origin.x;
            switch (quadrant) {
              case 2:
              case 3:
                plotR.Y = posit.Y - radius;
                break;
              case 1:
              case 4:
              default:
                plotR.Y = posit.Y + radius;
                break;
            }
          } else {
            distance = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
            slope = deltaY / deltaX;
            delta = radius / (Math.sqrt(1 + Math.pow(slope, 2)));
  
            switch (quadrant) {
              case 1:
                plotR.Y = posit.Y - slope * delta;
                plotR.X = posit.X - delta;
                break;
              case 2:
                plotR.Y = posit.Y - slope * delta;
                plotR.X = posit.X - delta;
                break;
              case 3:
                plotR.Y = posit.Y + slope * delta;
                plotR.X = posit.X + delta;
  
                break;
              case 4:
              default:
                plotR.Y = posit.Y + slope * delta;
                plotR.X = posit.X + delta;
                break;
            }
          }
          startAngle = Math.acos(deltaX / distance);
          if (quadrant == 1 || quadrant == 4) startAngle = -startAngle;
  
  
          context.clearRect(0, 0, 900, 400);
  
          // Draw Origin Point for reference, but not for production
          context.beginPath();
          context.lineWidth = 1;
          context.fillStyle = "#0000FF";
          context.strokeStyle = "#0000FF";
          context.arc(origin.x, origin.y, 3, 0, 2 * Math.PI, true);
          context.fill();
  
          // Drawn Calculated Origin point offset from Mouse in the direction of Origin Point
          context.beginPath();
          context.lineWidth = 1;
          context.fillStyle = "#00FF00";
          context.strokeStyle = "#00FF00";
          context.arc(plotR.X, plotR.Y, 3, 0, 2 * Math.PI, true);
          context.fill();
  
          // Draw 'Sunflower' Curve
          context.beginPath();
          context.lineCap = 'round';
          context.lineWidth = 3;
          context.strokeStyle = "#FF0000";
          context.arc(plotR.X, plotR.Y, radius, startAngle - (curveDeg * degrees / 2), startAngle + (curveDeg * degrees / 2), false);
  
          context.stroke();
          return;
        });
      });
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <canvas id="canvas" width="650" height="200" style=" border: 1px #000 solid"></canvas>
  

  回复于 2024-05-02T13:34:56+08:00