使用js画图之画切线
样例：http://www.zhaojz.com.cn/demo/draw9.html
//画切线
//point圆外的一点
//dot圆心
//r半径
functiondrawCircleTangent(point,dot,r){
//画辅助线-start
varcolor='DarkRed';//切线的颜色
varcolor2="#ccc";//其它辅助线的颜色
drawLine(dot,[dot[0]+9*r,dot[1]],{color:color2});//延长圆心所在的水平线
drawLine(dot,[dot[0],dot[1]-4*r],{color:color2});//画出圆心所在的垂直线
drawPoint({
pw:2,ph:2,color:'DarkRed',point:[dot[0]+9*r,dot[1],'x']
});
drawPoint({
pw:2,ph:2,color:'DarkRed',point:[dot[0],dot[1]-4*r,'y']
});
drawLine(point,[point[0],dot[1]],{color:color2});//画point到x轴的垂直线
drawLine(point,dot,{color:color2});//连接point与dot
drawLine([point[0]-2*r,point[1]],[point[0]+2*r,point[1]],{color:color2});//画point所在的水平线
//画辅助线-end
//point.push('point');
drawPoint({
pw:2,ph:2,color:'DarkRed',point:point
});
//dot.push('centre');
varr_square=Math.pow(r,2);//r的平方
varpoint_v=point[1]-dot[1];//point到x轴的距离的平方
varpoint_h=point[0]-dot[0];//point到y轴的距离的平方
varc_square=Math.pow(point_v,2)+Math.pow(point_h,2);//point到圆心的距离的平方
varc=Math.sqrt(c_square);//point到圆心的距离
varsinA=Math.abs(point_v)/c;//sinA
varcosA=Math.abs(point_h)/c;//cosA
varb_square=c_square-r_square;//point到切点的距离的平方
varb=Math.sqrt(b_square);//point到切点的距离
varsinB=b/c;//sinB
varcosB=r/c;//cosB
//以圆心为坐标圆点，确定point所在的象限
varquadrant =1;//默认值
varpm_h=point_h==0?point_h:point_h/Math.abs(point_h);//水平方向
varpm_v=point_v==0?point_v:point_v/Math.abs(point_v);//垂直方向
varhv=pm_h*pm_v;//相乘，-1时point在一三象限，+1时point在二四象限，0时point在轴上
switch(hv){
case1:
if((pm_h+pm_v)==-2){
quadrant=2;//第二象限
}else{
quadrant=4;//第四象限
}
break;
case-1:
if((pm_h-pm_v)==-2){
quadrant=3;//第三象限
}
break;
case0:
if((pm_h+pm_v)==-1){//point在x轴的负半轴或者y轴的正半轴时，断定point在第二象限
quadrant=2;
}
if((pm_h+pm_v)==1){//point在x轴的正半轴或者y轴的负半轴时，断定point在第四象限
quadrant=4;
}
break;
default:
}
varsinC=0;
varconC=0;
varsinD=0;
varconD=0;
switch(quadrant){
case1:
sinC=cosB*cosA+sinB*sinA;//sinC=sin(90+(B-A))=cos(B-A)=cosB*cosA+sinB*sinA
conC=-(sinB*cosA-cosB*sinA);//cosC=cos(90+(B-A))=-sin(B-A)=-(sinB*cosA-cosB*sinA)
sinD=-(cosA*cosB-sinA*sinB);//sinD=sin(270-(A+B))
conD=-(sinA*cosB+cosA*sinB);//conD=cos(270-(A+B))
break;
case2:
sinC=-(cosB*cosA-sinB*sinA);//sinC=sin(-90+(A+B))
conC=sinA*cosB+cosA*sinB;//conC=cos(-90+(A+B))
sinD=cosA*cosB+sinA*sinB;//sinD=sin(90+(A-B))
conD=-(sinA*cosB-cosA*sinB);//conD=cos(90+(A-B))
break;
case3:
sinC=-(cosA*cosB+sinA*sinB);//sinC=sin(-90+(A-B))
conC=-(sinA*cosB-cosA*sinB);//conC=cos(-90+(A-B))
sinD=(cosA*cosB-sinA*sinB);
conD=sinA*cosB+cosA*sinB;
break;
case4:
sinC=cosA*cosB-sinA*sinB;
conC=-(sinA*cosB+cosA*sinB)
sinD=-(cosA*cosB+sinA*sinB);//sinD=sin(270+(A-B))
conD=(sinA*cosB-cosA*sinB);//conD=cos(270+(A-B))
break;
default:
}
vartangentPointA=[point[0]+b*conC,point[1]+b*sinC];//切点A位置
drawLine(point,tangentPointA,{color:color});//画出切线
drawLine(dot,tangentPointA,{color:color2});//连接圆点与切点
//drawArc(point,17,(quadrant==1||quadrant==4?180:0)-(quadrant==2||quadrant==3?(-1):1)*Math.asin(sinC)*180/Math.PI,0);
vartangentPointB=[point[0]+b*conD,point[1]+b*sinD];//切点B位置
drawLine(point,tangentPointB,{color:color});//画出切线
drawLine(dot,tangentPointB,{color:color2});//连接圆点与切点
//drawArc(point,27,(quadrant==1||quadrant==4?180:0)-(quadrant==2||quadrant==3?(-1):1)*Math.asin(sinD)*180/Math.PI,0);
drawPoint({//描切点
pw:3,ph:3,color:'DarkRed',point:tangentPointA
});
drawPoint({//描切点
pw:3,ph:3,color:'DarkRed',point:tangentPointB
});
//画辅助弧
//(quadrant==1||quadrant==4?360:0)
drawArc(point,b,60,(quadrant==1||quadrant==4?180:0)-(quadrant==2||quadrant==3?(-1):1)*Math.asin(sinC)*180/Math.PI-5);
}