html数字显示百分比,扣丁学堂html5 教程之Canvas实现圆形进度条并显示数字百分比效果...
今天扣丁学堂html5培训小编和大家分享一下Canvas实现圆形进度条并显示数字百分比效果示例,对html5感兴趣的小伙伴或者是参加学习的小伙伴可以了解一下。
Canvas实现圆形进度条并显示数字百分比效果
本文介绍了HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例,具体如下:
1、首先创建html代码
2、创建canvas环境
var canvas = document.getElementById('canvas'), //获取canvas元素
context = canvas.getContext('2d'), //获取画图环境,指明为2d
centerX = canvas.width/2, //Canvas中心点x轴坐标
centerY = canvas.height/2, //Canvas中心点y轴坐标
rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
speed = 0.1; //加载的快慢就靠它了
3、绘制5像素宽的运动外圈
//绘制5像素宽的运动外圈
function blueCircle(n){
context.save();
context.strokeStyle = "#fff"; //设置描边样式
context.lineWidth = 5; //设置线宽
context.beginPath(); //路径开始
context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
context.stroke(); //绘制
context.closePath(); //路径结束
context.restore();
}
4、绘制白色外圈
//绘制白色外圈
function whiteCircle(){
context.save();
context.beginPath();
context.lineWidth = 2; //设置线宽
context.strokeStyle = "red";
context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
}
5、百分比文字绘制
function text(n){
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle = "#fff"; //设置描边样式
context.font = "40px Arial"; //设置字体大小和字体
//绘制字体,并且指定位置
context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
context.stroke(); //执行绘制
context.restore();
}
6、让它运动起来
//动画循环
(function drawFrame(){
window.requestAnimationFrame(drawFrame);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if(speed > 100) speed = 0;
speed += 0.1;
}());
完整代码:
HTML5 Canvas 圆形进度条并显示数字百分比
*{margin:0;padding:0;}
body{text-align:center;background-color:#000;}
window.onload = function(){
var canvas = document.getElementById('canvas'), //获取canvas元素
context = canvas.getContext('2d'), //获取画图环境,指明为2d
centerX = canvas.width/2, //Canvas中心点x轴坐标
centerY = canvas.height/2, //Canvas中心点y轴坐标
rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
speed = 0.1; //加载的快慢就靠它了
//绘制5像素宽的运动外圈
function blueCircle(n){
context.save();
context.strokeStyle = "#fff"; //设置描边样式
context.lineWidth = 5; //设置线宽
context.beginPath(); //路径开始
context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
context.stroke(); //绘制
context.closePath(); //路径结束
context.restore();
}
//绘制白色外圈
function whiteCircle(){
context.save();
context.beginPath();
context.lineWidth = 2; //设置线宽
context.strokeStyle = "red";
context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
}
//百分比文字绘制
function text(n){
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle = "#fff"; //设置描边样式
context.font = "40px Arial"; //设置字体大小和字体
//绘制字体,并且指定位置
context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
context.stroke(); //执行绘制
context.restore();
}
//动画循环
(function drawFrame(){
window.requestAnimationFrame(drawFrame);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if(speed > 100) speed = 0;
speed += 0.1;
}());
}
以上就是扣丁学堂html5在线学习小编给大家分享的Canvas 实现圆形进度条并显示数字百分比效果示例,想要了解更多关于html5开发内容的小伙伴可以登录扣丁学堂官网咨询,扣丁学堂有专业的html5培训班邀请有理想的你加入。
本文仅代表作者个人观点,不代表SEO研究协会网官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱cxb5918@163.com。更多相关资讯,请到SEO研究协会网www.seoxiehui.cn学习互联网营销技术请到巨推学院www.jutuiedu.com。
html数字显示百分比,扣丁学堂html5 教程之Canvas实现圆形进度条并显示数字百分比效果...相关推荐
- html的canvas显示数字,HTML5效果:Canvas 实现圆形进度条并显示数字百分比
实现效果 1.首先创建html代码 2.创建canvas环境 var canvas = document.getElementById('canvas'), //获取canvas元素 context ...
- h5的fetch方法_扣丁学堂HTML5分享h5中的fetch方法解读
扣丁学堂HTML5分享h5中的fetch方法解读 2018-07-06 14:43:10 725浏览 本篇文章扣丁学堂 Fetch概念: fetch身为H5中的一个新对象,他的诞生,是为了取代ajax ...
- 小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
- Android圆形进度条,显示百分比
自定义View在我心中一直属于比较难的范围,但是别人能写为什么我写不出来呢,所以静下心来,根据网上参考,自己写了一个比较普遍的圆环百分数的View,经分析(本Demo)主要核心就一个线程,定时刷新界面 ...
- python的excell库_扣丁学堂Python基础教程之Excel处理库openpyxl详解
扣丁学堂Python基础教程之Excel处理库openpyxl详解 2018-05-04 09:49:49 3197浏览 openpyxl是一个第三方库,可以处理xlsx格式的Excel文件.pipi ...
- python代码优化指南_扣丁学堂Python视频教程之Pandas初学者代码优化指南
扣丁学堂Python视频教程之Pandas初学者代码优化指南 2018-02-05 10:44:24 1320浏览 今天扣丁学堂给大家介绍一下关于Python视频教程之Pandas详解,首先Panda ...
- python 技巧视频教程_扣丁学堂Python视频教程之Python开发技巧
扣丁学堂Python视频教程之Python开发技巧 2018-07-25 14:09:44 808浏览 关于Python开发的技巧小编在上篇文章已经给大家分享过一些,本篇文章扣丁学堂 神秘eval: ...
- java开发高端说法_扣丁学堂教你如何成为JavaEE高端开发人才
俗话说干一行爱一行,行行出状元.这句话在如今飞速发展的互联网时代依然实用,如今不少参加学习技术的小伙伴都希望自己可以成为专业的高端开发人才,本篇文章扣丁学堂教你如何成为高端开发人才. 互联网时代,对人 ...
- php 读取文件的所有图片格式,扣丁学堂PHP培训简述PHP如何读取文件夹下所有图片、文件-php文件...
本篇文章扣丁学堂PHP培训小编给读者们分享一下PHP读取文件夹下所有图片.文件的实例,文中有代码列出供小伙伴们参考,希望对小伙伴们有帮助. 如下所示:$hostdir=dirname(__FILE__ ...
最新文章
- 鼠标事件php,事件类型——鼠标事件(示例代码)
- vuex 基本入门和使用(一)
- lightoj1060_组合数学
- Xshell代理访问外网或者公司的内网
- BayaiM__oracle切换归档模式步骤:
- 一种结合颜色特征和区域生长的疾病斑图像分割方法(复杂环境下分割效果好)
- 主要知识产权(专利权,著作权,商标权)的申请与保护
- PDF Expert使用教程:如何在Mac中删除PDF文件中的指定页面?
- c语言39关键字及其含义,C语言关键字含义
- WebStorm WiFi真机同步无法安装成功及appLoader无法连接
- c语言字体透明背景,背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)...
- 搭建Vgg16训练CIFAR10数据集
- 人力资源管理系统课程设计
- 判断BIOS的启动模式和磁盘分区格式
- ei会议和ei源刊的区别_ei会议论文和ei期刊论文的区别是什么
- 拒退10万保证金 哈啰杨磊被限制消费 公司回应正在申请解除
- 微软跳上OpenID Bandwagon
- 网络测试工具——iperf3使用说明
- 南宁职业技术学院计算机专业宿舍,南宁职业技术学院星级文明宿舍评比办法(试行)...
- 如果有人证明出来哥德巴赫猜想会有啥成就?