使用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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 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
77A一级收信机修理记
2021/03/02 无线电
php开发环境配置记录
2011/01/14 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python字符串string的内置方法实例详解
2018/05/14 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
介绍一下gcc特性
2012/01/20 面试题
大学生评语大全
2014/04/18 职场文书
村庄绿化方案
2014/05/07 职场文书
基层党组织整改方案
2014/10/25 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
把77A收信机改造成收音机
2022/04/05 无线电