canvas制作原生的百分比圆形比例等
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas制作原生的百分比圆形比例等</title> <style> *{margin:0;padding:0;} body{text-align:center;} </style> </head> <body> <div class="chart"> <canvas id="canvas" width="300" height="300" style="border:1px solid #e5e5e5"></canvas> </div> </body> </html>
<script type="text/javascript"> window.onload = function(){ var draw = document.getElementById("canvas"); if(!draw.getContext){ return false; } var context=draw.getContext('2d'), centerX=draw.width/2, centerY=draw.height/2, angle= 0.6, //占的百分数 color=[], //"#e5e5e5","red","#F00" font="40px Arial"; speed = 0; //从度数开始50---》表示从50度开始 context.lineCap="round"; //square 平角的帽 //绘制外圈的圆 function blueCircle(){ context.save();//save() 方法保存当前图像状态的一份拷贝。 context.strokeStyle = color[0] || "#e5e5e5"; //设置描边样式 context.lineWidth = 5; //设置线宽 context.beginPath();//路径开始 //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针) context.arc(centerX,centerY,centerX-5,0,2*Math.PI,false); context.stroke(); context.closePath(); //路径结束 context.restore();//save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态,然后,通过调用 restore() 来恢复以前的值。 } //绘制红色外圈 function redCircle(n){ context.save(); context.strokeStyle = color[1] || "red"; //设置描边样式 context.lineWidth = 5; //设置线宽 context.beginPath(); context.arc(centerX, centerY, centerX-5 , -Math.PI /2, (n * 3.6 - 90) * Math.PI / 180, false); context.stroke(); context.closePath(); context.restore(); } //百分比文字绘制 function text(n){ context.save(); //save和restore可以保证样式属性只运用于该段canvas元素 context.beginPath(); context.font =font || "40px Arial"; //设置字体大小和字体 context.fillStyle=color[2] || "#333"; context.textAlign='center';//文本程度对齐方法 context.textBaseline='middle';//文本垂曲标的目的,基线位置 //绘制字体,并且指定位置 context.fillText(n.toFixed(0)+"%", centerX, centerY); context.stroke(); //执行绘制 context.closePath(); context.restore(); } //自己一直调用自己动画循环 var timer=null; (function drawFrame(){ timer=setTimeout(drawFrame,10); context.clearRect(0, 0, draw.width, draw.height); blueCircle(); redCircle(speed); text(speed); if(speed >= angle*100){ clearTimeout(timer); } speed += 0.2; }()); } </script>
canvas制作原生的百分比圆形比例等的更多相关文章
- Canvas制作动态进度加载水球
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
- 使用canvas制作的移动端color picker
使用canvas制作的移动端color picker 项目演示地址(用手机或者手机模式打开) 我在另一个中demo,需要用到color picker,但是找不到我需要的移动端color picker, ...
- 酷!使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 使用canvas制作在线画板
canvas绘图的强大功能,让人前仆后继的去研究它.代码全部加起来不足百行.还用到了h5中的<input type="color"/>和<input type=& ...
- 怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
随机推荐
- 20155238 2016-2017-2 《Java程序设计》第一周学习总结
教材内容总结 浏览教材,根据自己的理解每章提出一个问题 1.Java语言跨平台的依据是什么?标准的出现是否会限制JAVA的开发与发展? 2.怎样理解类?PATH对于Java编写的意义是什么? 3.Ja ...
- C++多线程,互斥,同步
同步和互斥 当有多个线程的时候,经常需要去同步这些线程以访问同一个数据或资源.例如,假设有一个程序,其中一个线程用于把文件读到内存,而另一个线程用于统计文件中的字符数.当然,在把整个文件调入内存之前, ...
- Gitlab+Jenkins学习之路(一)之Git基础
1.GIT基础 GIT是一个分布式版本管理系统,速度快,适合大规模,跨地区多人协同开.SVN是一个集中式版本管理系统. (1)GIT生态 GIT分布式版本管理系统 Gitlab git私库解决方 ...
- HDU 6191 2017ACM/ICPC广西邀请赛 J Query on A Tree 可持久化01字典树+dfs序
题意 给一颗\(n\)个节点的带点权的树,以\(1\)为根节点,\(q\)次询问,每次询问给出2个数\(u\),\(x\),求\(u\)的子树中的点上的值与\(x\)异或的值最大为多少 分析 先dfs ...
- Redis架构之防雪崩设计:网站不宕机背后的兵法
互联网系统中不可避免要大量用到缓存,在缓存的使用过程中,架构师需要注意哪些问题?本文以 Redis 为例,详细探讨了最关键的 3 个问题. 一.缓存穿透预防及优化 缓存穿透是指查询一个根本不存在的数据 ...
- thymeleaf多条件判断
解决办法:将逻辑关系全部写到大括号里面 <div th:if="${task.getStatusStr() !='已延期' ||task.getStatusStr()!='已完成'}& ...
- 实战中的asp.net core结合Consul集群&Docker实现服务治理
0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.前言 在写这篇文章之前,我看了很多关于consul的服务治理,但发现基本上都是直接在powershell或者以命令工具的方式在 ...
- asp.net core结合NLog搭建ELK实时日志分析平台
0.整体架构 整体架构目录:ASP.NET Core分布式项目实战-目录 一.介绍ELK 1.说明(此篇ELK采用rpm的方式安装在服务器上)-牛刀小试 承接上一篇文章的内容准备部署ELK来展示asp ...
- Python 10min系列之面试题解析丨Python实现tail -f功能
关于这道题,简单说一下我的想法吧.当然,也有很好用的 pyinotify 模块专门监听文件变化,不过我更想介绍的,是解决的思路. 毕竟作为面试官,还是想看到一下解决问题的思路,而且我觉得这一题的难点不 ...
- 频繁请求报requests异常的处理
由于数据量的增大,调用接口的次数会增加. 当连续向目标网站发送多次request后,目标网站可能会认为是,恶意攻击. 于是会抛出requests异常. 测试代码: for i in range(200 ...