使用js画图之圆、弧、扇形


Posted in Javascript onJanuary 12, 2015

半径为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也能做如此炫酷的事情。。。

Javascript 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
使用javascript做在线算法编程
May 25 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
js函数与php函数的区别实例浅析
Jan 12 #Javascript
使用JS画图之点、线、面
Jan 12 #Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 #Javascript
jQuery实现友好的轮播图片特效
Jan 12 #Javascript
js函数内变量的作用域分析
Jan 12 #Javascript
Jquery api 速查表分享
Jan 12 #Javascript
js常用系统函数用法实例分析
Jan 12 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php权重计算方法代码分享
2014/01/09 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
php常用数组函数实例小结
2016/12/29 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
python操作oracle的完整教程分享
2018/01/30 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
python实现按日期归档文件
2021/01/30 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
房地产销售计划书
2014/01/10 职场文书
新闻编辑求职信
2014/04/09 职场文书
身边的榜样活动方案
2014/08/20 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
整脏治乱工作简报
2015/07/21 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python