canvas实现圆形进度条动画的示例代码


Posted in HTML / CSS onDecember 26, 2017

本文介绍了canvas实现圆形进度条动画,分享给大家,具体如下:

先给大家看看效果图,然后在上代码。

canvas实现圆形进度条动画的示例代码

进度条动画

1. canvas的HTML部分很简单就一个canvas标签

canvas画布的宽高是自身的属性,要在行间样式设置,若是在style设置宽高会使你画的图片变形。

<canvas id="mycanvas" width="100" height="100">
70%
</canvas>

2.画布的js代码

主要思路:效果图中是由三个圆组成的,最外层是一个有黑边的大圆,里面一个改变进度条进度的圆和一个现实百分比的圆。

注意:每画一个圆都要新建一个图层,这样可以单独设置每个图层的样式,之间不相互影响,就像ps的图层一样,一个完整的设计稿都是很多图层组成的。

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
function draw(i){
// 大圆框
context.beginPath();
context.lineWidth = 1;
context.arc(50,50,46,0,Math.PI*2);
context.strokeStyle = "grey";
context.stroke();
// 大圆
context.beginPath();
var grd = context.createLinearGradient(15,15,80,80);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"blue");
context.arc(50,50,38,0,Math.PI*2*(i/100));
context.lineWidth = 16;
context.strokeStyle = grd;
context.stroke();
// context.fillStyle = grd;
// context.fill();
// 小圆
context.beginPath();
context.arc(50,50,30,0,Math.PI*2);
context.lineWidth = 1;
context.strokeStyle = "grey";
context.stroke();
context.fillStyle = "white";
context.fill();
// 字
context.beginPath();
context.textBaseline = "middle";
context.textAlign = "center";
context.font = "20px Arial";
context.fillStyle = "black";
context.fillText(i+"%",50,50);
}

3. 使用计时器来刷新画布,达到进度条的效果

使用context.clearRect()方法来清空画布的

var i = 0;
var progress = parseInt(canvas.innerHTML);
// console.log(progress);
var timer = setInterval(function(){
if(i >= progress){
clearInterval(timer);
}
context.clearRect(0,0,canvas.width,canvas.height);
draw(i);
i++;
},50);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 #HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 #HTML / CSS
canvas如何绘制钟表的方法
Dec 13 #HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 #HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 #HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 #HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 #HTML / CSS
You might like
php 读取文件乱码问题
2010/02/20 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
Python中面向对象你应该知道的一下知识
2019/07/10 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
硕士研究生自我鉴定
2013/11/08 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
师范生个人推荐信
2013/11/29 职场文书
三字经教学反思
2014/04/26 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS