<html5>圍繞圓圈畫三角形

Question

我想要點擊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); 

    ... 
    ... 

//繪製由retacgle圓圈

  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(); 
     } 

    .. 
    .... 

Answer 1

這裏有一種方法使用三角學：

實施例的代碼和一個演示：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();