h5画三角形_<html5>围绕圆圈画三角形

我想要点击retacgle，在圆圈周围绘制一个三角形。围绕圆圈画三角形

源代码是这样的...

但是，三角并不好每个位置..

怎样绘制周围像附加的图像圆三角形...

....

....

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

}

..

....

+0

你可以尝试从三角形到圆心的一个点计算长度，保持旋转的三角形，直到你找到最短距离。为了定位三角形，只需搜索一个位置 –

2014-08-28 01:10:42