javascript - <html5>在圆周围绘制三 Angular 形

我想要如果单击retacgle，则在圆周围绘制一个三角形。

像这样的源代码...

但是，三角形的位置不好。

我该如何在圆周围画一个三角形，如附件图所示

http://i.stack.imgur.com/hccCQ.jpg

    ....
    ....



            ost = 30515;
            oen = 31570;

            //ost = 74147;
            //oen = 75664;

            color="255,0,0";
            av = (ost+oen) /2 ;
            x1 = centerX-radius*Math.sin(-arg*av);
            y1 = centerY-radius*Math.cos(-arg*av);
            x2 = centerX-radius*Math.sin(-arg*av)*1.07;
            y2 = centerY-radius*Math.cos(-arg*av)*1.07;

            var s={x1:x1,y1:y1,x2:x2,y2:y2};
            triShape(s,color,true);

    ...
    ...

//通过重新绘制画一个圆

          function Shape_sub(s, k, color, draw){
            ctx_sub.save();
            //ctx_sub.rotate(Math.PI * 2 / 12);
        ctx_sub.fillStyle='rgb('+color+')';
            ctx_sub.imageSmoothingEnabled = true;
        ctx_sub.beginPath();
        ctx_sub.moveTo(s.x1,s.y1);
        ctx_sub.lineTo(s.x2,s.y2);
        ctx_sub.lineTo(s.x3,s.y3);
        ctx_sub.lineTo(s.x4,s.y4);
        ctx_sub.lineTo(s.x1,s.y1);
        if(draw){
            ctx_sub.fill();
            ctx_sub.stroke();
        }
            ctx_sub.restore();

        }

//在圆周围画一个三角形->但不运行。

          function triShape(s,color,draw){
            ctx_sub.save();
            //ctx_sub.rotate(Math.PI * 2 / 12);
        ctx_sub.fillStyle='rgb('+color+')';
            ctx_sub.imageSmoothingEnabled = true;
        ctx_sub.beginPath();
        ctx_sub.moveTo(s.x1,s.y1);
            ctx_sub.lineTo(s.x1,s.y1);
        ctx_sub.lineTo(s.x2,s.y2);

        if(draw){
            ctx_sub.fill();
            ctx_sub.stroke();
        }
            ctx_sub.restore();
        }

    ..
    ....

最佳答案

这是使用三角函数的一种方法：

示例代码和演示：http://jsfiddle.net/m1erickson/7domgxf4/

// variables to define the circle and triangle
var PI=Math.PI;
var cx=150;
var cy=150;
var radius=100;
var triLength1=35;
var triLength2=18;
var triSweep=PI*2/3;
var rAngle=0;


function triCircle(){

    // calc triangle tip point (on circle's circumference);
    var x0=cx+radius*Math.cos(rAngle);
    var y0=cy+radius*Math.sin(rAngle);

    // calc outer side of triangle
    var tricx=cx+(radius+triLength1)*Math.cos(rAngle);
    var tricy=cy+(radius+triLength1)*Math.sin(rAngle);

    // calc remaining 2 triangle points
    var x1=tricx+(triLength2)*Math.cos(rAngle-PI/2);
    var y1=tricy+(triLength2)*Math.sin(rAngle-PI/2);
    var x2=tricx+(triLength2)*Math.cos(rAngle+PI/2);
    var y2=tricy+(triLength2)*Math.sin(rAngle+PI/2);

    // draw the circle and the triangle
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(cx,cy,radius,0,Math.PI*2);
    ctx.closePath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.closePath();
    ctx.stroke();
}

[增加]

您可以像这样计算任何点相对于中心点的角度：

var dx= s.x1 - centerX;
var dy= s.y1 - centerY;

rAngle= Math.atan2(dy,dx);

triCircle();