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 ...
随机推荐
- JavaEE笔记(一)
Hibernate Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自 ...
- 【HNOI2011】卡农
题面 题解 将无序化为有序,最后答案除以$m!$. 设$f[i]$表示选出了$i$个子集,并且满足所有的限制的方案数. 因为转移困难,所以考虑容斥 限制了每个数的出现次数为偶数,所以如果前$i - 1 ...
- CF 724 G. Xor-matic Number of the Graph
G. Xor-matic Number of the Graph 链接 题意: 给定一个无向图,一个interesting的三元环(u,v,s)满足,从u到v的路径上的异或和等于s,三元环的权值为s, ...
- 安装spark-1.5遇到的一些问题
1.java.lang.UnsatisfiedLinkError: org.apache.hadoop.util.NativeCodeLoader.buildSupportsSnappy()Z 这个问 ...
- [SYZOJ279]滑♂稽♂树
主♂席♂树♂裸♂题 https://syzoj.com/problem/279 https://oj.changjun.com.cn/problem/detail/pid/2425 // It is ...
- frp+TeamViewer 完美解决TeamViewer5分钟商业提醒
必要条件:必须有一个公网服务器 frp是一个开源的端口转发工具,中文使用说明及下载地址在这里 https://github.com/fatedier/frp/blob/master/README_z ...
- VRRP+tunnel+IP SLA+Track实现冗余切换
IP SLA(Internet Protocol Service-Level Agreement)互联网服务等级协议,本实验里通过发送测试报文,测试下一跳是否可达,结合Track实现冗余静态路由的切换 ...
- REVIT个人学习笔记——1.简介及熟悉界面
此贴并非教学,主要是自学笔记,所述内容只是些许个人学习心得的记录和备查积累,难以保证观点正确,也不一定能坚持完成. 如不幸到访,可能耽误您的时间,也难及时回复,贴主先此致歉.如偶有所得,相逢有缘,幸甚 ...
- 使用tensorflow进行mnist数字识别【模型训练+预测+模型保存+模型恢复】
import sys,os sys.path.append(os.pardir) import numpy as np from tensorflow.examples.tutorials.mni ...
- yocto-sumo源码解析(六): setup_bitbake
1. 创造日志handler: 在status_only模式,不需要日志以及UI # Ensure logging messages get sent to the UI as events hand ...