html 环形进度条,详解利用canvas实现环形进度条的方法
前提:有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用canvas来实现的方法。
效果图
DOM中,首先定义canvas画板元素:
you browser not support canvas!
对于不支持canvas的浏览器则会显示:you browser not support canvas!
接下来是js编写:
定义canvas.js并在页面引入
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; //加载的快慢就靠它了
//绘制蓝色外圈
function blueCircle(n) {
context.save();
context.beginPath();
context.strokeStyle = "#49f";
context.lineWidth = 12;
context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
context.stroke();
context.restore();
}
//绘制白色外圈
function whiteCircle() {
context.save();
context.beginPath();
context.strokeStyle = "#A5DEF1";
context.lineWidth = 12;
context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}
//百分比文字绘制
function text(n) {
context.save();
context.fillStyle = "#F47C7C";
context.font = "40px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(n.toFixed(0) + "%", centerX, centerY);
context.restore();
}
//动画循环
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if (speed > 100) speed = 0;
speed += 0.1;
}());
window.requestAnimationFrame(drawFrame, canvas);
每行代码的注释标注非常清楚,如果还有不理解的可以去看canvas基础,应该就可以了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html 环形进度条,详解利用canvas实现环形进度条的方法相关推荐
- 微信小程序进度条详解 progress 自定圆形进度条
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,progress用来实现水平进度条效果 1 基本使用 <progress percent="80& ...
- 毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
- php 六边形 属性图 能力数值图,详解基于 Canvas 手撸一个六边形能力图
一.前言 六边形能力图如下,由 6 个 六边形组成,每一个顶点代表其在某一方面的能力.这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图.当然,你也可以基于其他开源的 js 方案来 ...
- 详解利用基于gensim的TF-IDF算法实现基于文本相似度的推荐算法
详解利用基于gensim的TF-IDF算法实现基于文本相似度的推荐算法 TF-IDF的基本原理 算法思想 计算公式 相似度计算原理 微型图书推荐案例 案例背景 开发工具 数据预处理 TF-IDF模型建 ...
- python zxing 识别条码_详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强...
前言 这周和大家分享如何用python识别图像里的条码.用到的库可以是zbar.希望西瓜6辛苦码的代码不要被盗了.(zxing的话,我一直没有装好,等装好之后再写一篇) 具体步骤 前期准备 用open ...
- python middleware模块_详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击...
一.在django后台处理 1.将django的setting中的加入django.contrib.messages.middleware.MessageMiddleware,一般新建的django项 ...
- java web几百万分页_举例详解用Java实现web分页功能的方法
举例详解用Java实现web分页功能的方法 发布于 2020-11-25| 复制链接 摘记: 分页问题是一个非常普遍的问题,开发者几乎都会遇到,这里不讨论具体如何分页,说明一下Web方式下分页的原理. ...
- 计算机打开程序乱码,打开软件乱码怎么解决,详解win7电脑打开软件乱码的解决方法...
今天小编给大家详解win7电脑打开软件乱码的解决方法,使用win7系统过程中,有时用户会遇到电脑打不开软件,打开乱码的问题,为此问题困扰的用户,可参照以下的方法进行解决. 最近有位win7系统用户使用 ...
- JSPatch实现原理详解:让JS调用/替换任意OC方法
JSPatch实现原理详解:让JS调用/替换任意OC方法 2015-07-10 09:05 编辑: suiling 分类:iOS开发 来源:bang JSPatch以小巧的体积做到了让JS调用/替换任 ...
最新文章
- C++简单使用priority_queue
- HTML5 学习手笔二:canvas API 绘制树形图案A
- 本地安装magento无法登陆后台的问题
- 蓝牙最新版本6.0_低功耗蓝牙的有趣事实
- 【报告分享】2020年中过短视频+教育发展展望.pdf(附教育行业交流社群及报告下载链接)...
- ab压力测试_使用ab来一次压力测试之旅
- win7定时关机命令是什么
- msdia80.dll是什么文件?msdia80.dll文件缺失怎么修复?
- 常用的字符编码:ASCII、Unicode、UTF-8
- 关于NTFS数据流ADS的详细介绍
- BZOJ 1406 [AHOI2007]密码箱 数论
- 李白藏头诗鸿蒙,【表白的诗句藏头诗】表白的诗句60句
- shell脚本开头#!/bin/bash和#!/bin/sh是什么意思以及区别
- E2. Divisible Numbers (hard version)
- HTML5:最后的火种
- java面试题大合集
- Linux下输入子系统上报触摸屏坐标
- 为英雄无敌3写个游戏修改器
- shopnc 实现手机、邮箱、用户名登录
- CISAW信息安全保障人员-应急管理