使用js画图之圆、弧、扇形
半径为r的圆上的点p(x,y)与圆心O(x0，y0)的关系:x=x0+rcosA; y=y0+rsinA，A为弧度
样例：http://www.zhaojz.com.cn/demo/draw6.html
一、圆
//圆形/椭圆
//dot圆点
//r半径
//compressionRatio垂直压缩比
functiondrawCircle(dot,r,compressionRatio,data){
varpstart=[dot[0]+r,dot[1]];//起点
varpre=pstart;
for(vari=0;i<360;i+=5){
rad=i*Math.PI/180;//计算弧度
//r*Math.cos(rad)弧线的终点相对dot的水平偏移
//r*Math.sin(rad)弧线的终点相对dot的垂直偏移
//compressionRatio垂直压缩比例
varcur=[r*Math.cos(rad)+dot[0],compressionRatio*r*Math.sin(rad)+dot[1]];
drawLine(pre,cur);
pre=cur;//保存当前点的坐标
}
drawLine(pre,pstart);//使闭合
//描圆点
drawPoint({
pw:2,ph:2,color:"DarkRed",point:dot
});
}
二、弧
就在画出圆的一部分，算法与圆相似
//画弧
//dot圆点
//r半径
//angle圆心角
//angleOfSlope与x轴的夹角
//pop是否弹出
//title标签
functiondrawArc(dot,r,angle,angleOfSlope,pop,title){
varnewDot=[dot[0],dot[1]];
vara=(angleOfSlope+angle/2)*Math.PI/180;
if(pop){//计算圆心的新坐标
newDot[0]=dot[0]+10*Math.cos(a);
newDot[1]=dot[1]+10*Math.sin(a);
}
if(!angleOfSlope){
angleOfSlope=0;
}
varaos=angleOfSlope*Math.PI/180;
varaos2=(angleOfSlope+angle)*Math.PI/180;
varpstart=[newDot[0]+r*Math.cos(aos),newDot[1]+r*Math.sin(aos)];//弧线的起点
varpend=[newDot[0]+r*Math.cos(aos2),newDot[1]+r*Math.sin(aos2)];//弧线的终点
varpre=pstart;
for(vari=0;i<angle;i+=2){//在angle范围内画弧
rad=(i+angleOfSlope)*Math.PI/180;
varcur=[r*Math.cos(rad)+newDot[0],r*Math.sin(rad)+newDot[1]];
drawLine(pre,cur);
pre=cur;
}
}
三、扇形
将弧的两端与圆心相连
是不是很震撼，原来js也能做如此炫酷的事情。。。
//扇形
//dot圆点
//r半径
//angle圆心角
//angleOfSlope与x轴的夹角，确定扇形的方向
//pop是否弹出，即是否偏离圆心
//title标签
functiondrawSector(dot,r,angle,angleOfSlope,pop,title){
varnewDot=[dot[0],dot[1]];
vara=(angleOfSlope+angle/2)*Math.PI/180;
if(pop){//计算圆心的新坐标
newDot[0]=dot[0]+10*Math.cos(a);
newDot[1]=dot[1]+10*Math.sin(a);
}
if(!angleOfSlope){
angleOfSlope=0;
}
varaos=angleOfSlope*Math.PI/180;
varaos2=(angleOfSlope+angle)*Math.PI/180;
varpstart=[newDot[0]+r*Math.cos(aos),newDot[1]+r*Math.sin(aos)];//弧线的起点
varpend=[newDot[0]+r*Math.cos(aos2),newDot[1]+r*Math.sin(aos2)];//弧线的终点
drawLine(newDot,pstart);//连接圆心与起点
varpre=pstart;
for(vari=0;i<angle;i+=2){//在angle范围内画弧
rad=(i+angleOfSlope)*Math.PI/180;
varcur=[r*Math.cos(rad)+newDot[0],r*Math.sin(rad)+newDot[1]];
drawLine(pre,cur);
pre=cur;
}
drawPolyline([pre,pend,newDot]);//使闭合
//描圆心
drawPoint({
pw:2,ph:2,color:"DarkRed",point:dot
});
//标签
if(title){
document.write("<spanstyle="height:24px;line-height:24px;width:80px;text-align:center;color:RED;position:absolute;left:"+(newDot[0]+r*(2/4)*Math.cos(a)-40)+"px;top:"+(newDot[1]+r*(2/4)*Math.sin(a)-12)+"">"+title+"</span>");
}
}
相关文章