半径为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. JavaEE中的MVC(四)AOP代理

    咱们来吹牛,JDK的动态代理在AOP(Aspect Oriented Programming,面向切面编程)中被称为AOP代理,而AOP是Spring框架中的重要组成部分. 代理模式 但是什么是代理模 ...

  2. Android 异步消息处理机制前篇(二):深入理解Message消息池

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 上一篇中共同探讨了ThreadLocal,这篇我们一起看下常提到的Message消息池到底是怎么回事,废话少说吧,进入正题. 对于稍有经验的开发人员 ...

  3. codeblocks+mbedtls库配置

    网上都没有找到window下mbedtls的相关配置,或许是太简单了.希望可以帮助那些像我这样的小白一枚. 下载 github的下载:https://github.com/ARMmbed/mbedtl ...

  4. Axios 执行post发送两次请求的小坑

    vue-resource2.0已经不再更新,所以vue2.0官方推荐使用axios来代替.实际项目也是应用上了vue+axios,然后就有了这么一段填坑的经历. 问题:axios使用post请求时,发 ...

  5. sklearn.neighbors.kneighbors_graph的简单属性介绍

    connectivity = kneighbors_graph(data, n_neighbors=7, mode='distance', metric='minkowski', p=2, inclu ...

  6. POJ 1511 Invitation Cards 链式前向星+spfa+反向建边

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 27200   Accepted: 902 ...

  7. Tomcat 源码分析(一)——启动与生命周期组件

    写在前面的话:读Tomcat源码也有段时间了,大领悟谈不上.一些小心得记录下来,供大家参考相护学习. 一.启动流程 Tomcat启动首先需要熟悉的是它的启动流程.和初学者第一天开始写Hello Wor ...

  8. DDD峰会归来话DDD

    一场大戏落幕,首届DDD中国峰会如大会主题色一般的红.或许在12月9日这一天,全中国的DDD粉丝大约有一半都汇聚在了国家会议中心.听起来是幸,其实是不幸,因为DDD在中国的人群基数实在是太少了. 因为 ...

  9. 优先队列 poj3253 Fence Repair

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 51411   Accepted: 16879 De ...

  10. 《RabbitMQ Tutorial》译文 第 5 章 主题

    原文来自 RabbitMQ 英文官网的教程(5.Topics),其示例代码采用了 .NET C# 语言. In the previous tutorial we improved our loggin ...