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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JS面向对象编程详解
Mar 06 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 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在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
jquery获取radio值实例
2014/10/16 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
便利店的创业计划书
2014/01/15 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
《秋游》教学反思
2014/04/24 职场文书
法人代表证明书
2014/09/18 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
python playwright 自动等待和断言详解
2021/11/27 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL