使用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 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
javascript如何实现create方法
Nov 04 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php猜单词游戏
2015/09/29 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python简单基础小程序的实例代码
2019/04/28 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
巴西本土电商平台:Americanas
2020/06/21 全球购物
廉政承诺书范文
2015/04/28 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
Python实现信息管理系统
2022/06/05 Python