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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
Node.js+Express配置入门教程
May 19 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
thinkPHP实现瀑布流的方法
2014/11/29 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python 实现dict转json并保存文件
2019/12/05 Python
Python中包的用法及安装
2020/02/11 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
用Python开发app后端有优势吗
2020/06/29 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
外贸英文求职信范文
2015/03/19 职场文书
借钱欠条怎么写
2015/07/03 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
mysql 索引合并的使用
2021/08/30 MySQL