一般解决方案

Question

我想通过计算找到弧的终点和起点。

你可以输入

Range Raduis：150

范围起始角度：60

范围结束角度：160

请参阅Demo jsFiddle

link to screen shot demonstrating problem

非常感谢

function draw(val,StartAngle,EndAngle,XAxis,YAxis){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d'),
        x = 200,//center raduis
        y = 400;//center raduis
        d = EndAngle;//End Angle
        s = StartAngle;//Start angle
        X_Axis = XAxis;//feature to enable to move the circle on axis X
        Y_Axis = YAxis;// feature to enable to move the circle on axis Y

        p ={}
        p.r = val;
        p.d = d*2*Math.PI/360;
        p.s = s*2*Math.PI/360;
        p.x = X_Axis + p.d*Math.cos(p.r);
        p.y = Y_Axis + p.d*Math.sin(p.r);

        p.pex = p.x + p.r*Math.cos(d);
        p.pey = p.y - p.r*Math.sin(s);

        p.psx = p.x - Math.sin(s) * p.r;
        p.psy = p.y - Math.cos(s) * p.r ;

        context.clearRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        context.lineWidth = 1;

        context.arc(p.x ,p.y ,p.r,p.s,p.d);

        context.fillStyle = 'green';
        context.fillRect(x,y+val,2,2); // crnter circle

        context.fillStyle = 'yellow';
        context.moveTo(x-p.d,y+p.d);
        context.lineTo(x+p.d,y+p.d);

        context.stroke();

        // line color
        context.strokeStyle = 'black';
        context.stroke();

        // Cut off the top of the circle.
        //context.clearRect(0, 0, canvas.width, y);

        // This stuff's just to show some dots
        context.fillStyle = 'red';
        context.fillRect(x-1,y-1,2,2); // Middle
        context.fillRect(p.pex,p.pey,4,4);//Target point 1
        context.fillRect(p.psx,p.psy,4,4);// Target point 2

        context.fillRect(x-2,y+d+val-2,4,4); // Point on circle
        context.fillStyle = 'black';


    }

Answer 1

一般解决方案

  var r_length = ... // radius
  var r_start_angle = RangeStartAngle / 360 * 2 * Math.PI; // lets convert degrees to radians
  var r_end_angle = RangeEndAngle / 360 * 2 * Math.PI;

开始位置

  x = circle_center_x + Math.cos(r_start_angle) * r_length;
  y = circle_center_y + Math.sin(r_start_angle) * r_length;

结束职位

  x = circle_center_x + Math.cos(r_end_angle) * r_length;
  y = circle_center_y + Math.sin(r_end_angle) * r_length;

画弧

  context.arc(circle_center_x ,circle_center_y, r_start_angle, r_end_angle);

您可能想要使用该知识重写您的功能

如何计算弧的起点和终点的精确点位置

1 个答案:

一般解决方案