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 相关文章推荐
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
vue项目前端错误收集之sentry教程详解
May 27 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扩展
2010/03/12 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
python修改注册表终止360进程实例
2014/10/13 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python爬虫工具例举说明
2020/11/30 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
美丽的现代设计家具:2Modern
2018/07/26 全球购物
农村党支部先进事迹
2014/01/14 职场文书
社区包粽子活动方案
2014/01/21 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
中英文求职信范文
2015/03/19 职场文书
《叶问2》观后感
2015/06/15 职场文书
百年孤独读书笔记
2015/06/29 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
python如何读取.mtx文件
2021/04/22 Python
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Golang ort 中的sortInts 方法
2022/04/24 Golang