半径为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 垂直压缩比
function drawCircle(dot, r, compressionRatio, data){
var pstart = [dot[0]+r, dot[1]]; //起点
var pre = pstart;
for(var i=0; i < 360; i+=5){
rad = i*Math.PI/180; //计算弧度
//r*Math.cos(rad) 弧线的终点相对dot的水平偏移
//r*Math.sin(rad) 弧线的终点相对dot的垂直偏移
//compressionRatio 垂直压缩比例
var cur = [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 标签
function drawArc(dot, r, angle, angleOfSlope, pop, title){
var newDot = [dot[0], dot[1]];
var a = (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;
}
var aos = angleOfSlope*Math.PI/180;
var aos2 = (angleOfSlope+angle)*Math.PI/180; var pstart = [newDot[0]+r*Math.cos(aos), newDot[1]+r*Math.sin(aos)]; //弧线的起点
var pend = [newDot[0]+r*Math.cos(aos2), newDot[1]+r*Math.sin(aos2)]; //弧线的终点 var pre = pstart;
for(var i=0; i < angle; i+=2){ //在angle范围内画弧
rad = (i+angleOfSlope)*Math.PI/180;
var cur = [r*Math.cos(rad)+newDot[0], r*Math.sin(rad)+newDot[1]];
drawLine(pre,cur);
pre = cur;
} }

三、扇形

  将弧的两端与圆心相连

//扇形
//dot 圆点
//r 半径
//angle 圆心角
//angleOfSlope 与x轴的夹角,确定扇形的方向
//pop 是否弹出,即是否偏离圆心
//title 标签
function drawSector(dot, r, angle, angleOfSlope, pop, title){
var newDot = [dot[0], dot[1]];
var a = (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;
}
var aos = angleOfSlope*Math.PI/180;
var aos2 = (angleOfSlope+angle)*Math.PI/180; var pstart = [newDot[0]+r*Math.cos(aos), newDot[1]+r*Math.sin(aos)]; //弧线的起点
var pend = [newDot[0]+r*Math.cos(aos2), newDot[1]+r*Math.sin(aos2)]; //弧线的终点
drawLine(newDot,pstart); //连接圆心与起点
var pre = pstart;
for(var i=0; i < angle; i+=2){ //在angle范围内画弧
rad = (i+angleOfSlope)*Math.PI/180;
var cur = [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("<span style='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>");
}
}

JS画几何图形之二【圆】的更多相关文章

  1. JS画几何图形之五【过圆外一点作切线】

    样例:http://www.zhaojz.com.cn/demo/draw9.html 依赖:[点].[直线].[圆] //画切线 //point 圆外的一点 //dot 圆心 //r 半径 func ...

  2. JS画几何图形之一【直线】

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 ...

  3. JS画几何图形之四【饼图】

    饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 依赖:[扇形] //饼图 //dot 圆点 //r 半径 //data 数据(一 ...

  4. JS画几何图形之三【正弦曲线】

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 ...

  5. JS画几何图形之六【过直线外一点作垂线】

    样例:http://www.zhaojz.com.cn/demo/draw10.html 依赖:[点].[直线] //过直线外一点画垂线 function drawVerticalLine(point ...

  6. Arcgis for js开发之直线、圆、箭头、多边形、集结地等绘制方法

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  7. 【three.js详解之二】渲染器篇

    [three.js详解之二]渲染器篇   本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRend ...

  8. 用JS画斐波那契螺旋线(黄金螺旋线)

    偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...

  9. js算法集合(二) javascript实现斐波那契数列 (兔子数列)

    js算法集合(二)  斐波那契数列 ★ 上一次我跟大家分享一下做水仙花数的算法的思路,并对其扩展到自幂数的算法,这次,我们来对斐波那契数列进行研究,来加深对循环的理解.     Javascript实 ...

随机推荐

  1. [特斯拉组件]ios高性能PageController

    本文来自于腾讯Bugly公众号(weixinBugly),作者:sparrowchen,未经作者同意,请勿转载,原文地址: http://mp.weixin.qq.com/s/hBgvPBP12IQ1 ...

  2. Scala入门系列(一):基础语法

    Scala基础语法 Scala与JAVA的关系 Scala是基于Java虚拟机,也就是JVM的一门编程语言,所有Scala的代码都需要经过编译为字节码,然后交由Java虚拟机来运行. 所以Scala和 ...

  3. Nginx负载均衡的优缺点

    Nginx的优点是: 1.工作在网络的7层之上,可以针对http应用做一些分流的策略,比如针对域名.目录结构,它的正则规则比HAProxy更为强大和灵活,这也是它目前广泛流行的主要原因之一,Nginx ...

  4. Selenium中如何使用xpath更快定位

    在学习Selenium路上,踩了也不少坑,这是我最近才发现的一个新写法,好吧,"才发现"又说明我做其他事了.对的,我现在还在加班! 开车~~~ 例子:知乎网 标签:Python3. ...

  5. Qt 显示图片的三种方法

    一. 直接用QLabel显示原图 //单独显示的QLabel 其大小为内容即图片的大小,若将QLabel放入QMainWindow中则QLabel的大小为其初始大小. /* QLabel *label ...

  6. J2EE十三个规范小结

    J2ee是我们步入java学习的一个開始.它将开启这趟奇幻之旅,Java是一种简单的,跨平台的,面向对象的,分布式的.解释的.健壮的安全的.结构的中立的,可移植的.性能非常优异的多线程的,动态的语言. ...

  7. hdu 4409 Family Name List(LCA&amp;有坑点)

    Family Name List Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. Android View视图系统分析和Scroller和OverScroller分析

    Android  View视图系统分析和Scroller和OverScroller分析 View  视图分析         首先,我们知道.在Android中全部的视图资源(无论是Layout还是V ...

  9. OVS 总体架构、源码结构及数据流程全面解析

    在前文「从 Bridge 到 OVS」中,我们已经对 OVS 进行了一番探索.本文决定从 OVS 的整体架构到各个组件都进行一个详细的介绍. OVS 架构 OVS 是产品级的虚拟交换机,大量应用在生产 ...

  10. clientHeight、offsetHeight、scrollHeight详解

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...