javascript+html5实现绘制圆环的方法


Posted in Javascript onJuly 28, 2015

本文实例讲述了javascript+html5实现绘制圆环的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html>
<html>
<head>
 <title> </title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
 <fieldset>
 <canvas id="myCanvas" width="400px" height="400px" >Your browser does not support the HTML5 canvas tag.</canvas>
</fieldset>
<script type="text/javascript">
  function yuanhuan(ctx,data,option){
   var cood=option.cood;
   var radius=option.radius;
   var lastpos=pos=0;
    for(var i=0;i<data.length;i++){
     ctx.beginPath(); 
     ctx.moveTo(cood.x,cood.y); 
     ctx.fillStyle = data[i].bgcolor; 
     pos=lastpos+Math.PI*2*data[i].value/100;
     ctx.arc(cood.x,cood.y,radius,lastpos,pos,false); 
     ctx.fill(); 
     lastpos=pos;
    }
    ctx.beginPath(); 
    ctx.fillStyle ="white"; 
    radius*=0.5;
    ctx.arc(cood.x,cood.y,radius,0,Math.PI*2 ,false); 
    ctx.fill(); 
   }
var data=[
    {bgcolor:'yellowgreen',value:30},
    {bgcolor:'green',value:30},
    {bgcolor:'yellow',value:40}
   ];
 var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
   yuanhuan(ctx,data,{cood:{x:200,y:200},radius:150})
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 #Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 #Javascript
深入理解JavaScript中的箭头函数
Jul 28 #Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 #Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 #Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 #Javascript
CSS3实现动态背景登录框的代码
Jul 28 #Javascript
You might like
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
php生成二维码
2015/08/10 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
简单的JavaScript互斥锁分享
2014/02/02 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python异常处理知识点总结
2019/02/18 Python
Python3简单实现串口通信的方法
2019/06/12 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
测试时代收集的软件测试面试题
2013/09/25 面试题
int和Integer有什么区别
2013/05/25 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
2019个人工作总结
2019/06/21 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript