好用的的环形百分比动画效果
时间:2019-10-21
本文章向大家介绍好用的的环形百分比动画效果,主要包括好用的的环形百分比动画效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
var
p1 =
new
Progress({
el:
'my_html'
,
//canvas元素id
deg: 100,
//绘制角度
timer: 8,
//绘制时间
lineWidth: 5,
//线宽
lineBgColor:
'#BBBBBB'
,
//底圆颜色
lineColor:
'white'
,
//动态圆颜色
textColor:
'#BBBBBB'
,
//文本颜色
fontSize: 22,
//字体大小
circleRadius: 50
//圆半径
});
将下面插件保存为
progress.js 直接调用即可
let Progress = function(init){ this.init(init) }; Progress.prototype= { init:function (init) { this.el = init.el;//元素ID let cvsElement = document.getElementById(this.el),//获取元素 ctx=cvsElement.getContext("2d"),//获取画笔 width = cvsElement.width,//元素宽度 height=cvsElement.height,//元素高度 degActive=0,//动态线条 timer=null;//定时器 //停止时的角度 init.deg>0&&init.deg<=100? this.deg = init.deg:this.deg = 100; //线宽 init.lineWidth !== undefined? this.lineWidth = init.lineWidth : this.lineWidth =20; //判断宽高较小者 this.wh = width>height?height:width; //设置圆的半径,默认为宽高较小者 init.circleRadius>0&&init.circleRadius<=this.wh/2-this.lineWidth/2? this.circleRadius = init.circleRadius:this.circleRadius = this.wh/2-this.lineWidth/2; //绘制线的背景颜色 init.lineBgColor !==undefined? this.lineBgColor = init.lineBgColor:this.lineBgColor='#ccc'; //绘制线的颜色 init.lineColor !==undefined? this.lineColor = init.lineColor:this.lineColor='#009ee5'; //绘制文字颜色 init.textColor !==undefined? this.textColor = init.textColor:this.textColor='#009ee5'; //绘制文字大小 init.fontSize !==undefined? this.fontSize = init.fontSize:this.fontSize=parseInt(this.circleRadius/2); //执行时间 this.timer = init.timer; //清除锯齿 if (window.devicePixelRatio) { cvsElement.style.width = width + "px"; cvsElement.style.height = height + "px"; cvsElement.height = height * window.devicePixelRatio; cvsElement.width = width * window.devicePixelRatio; ctx.scale(window.devicePixelRatio, window.devicePixelRatio); } //设置线宽 ctx.lineWidth=this.lineWidth; //启动定时器 timer = setInterval(function(){ ctx.clearRect(0,0,width,height);//清除画布 ctx.beginPath();//开始绘制底圆 ctx.arc(width/2,height/2,this.circleRadius,1,8); ctx.strokeStyle=this.lineBgColor; ctx.stroke(); ctx.beginPath();//开始绘制动态圆 ctx.arc(width/2,height/2,this.circleRadius,-Math.PI/2,degActive*Math.PI/180-Math.PI/2); ctx.strokeStyle=this.lineColor; ctx.stroke(); let txt=(parseInt(degActive*100/360)+"%");//获取百分比 ctx.font=this.fontSize+"px SimHei"; let w=ctx.measureText(txt).width;//获取文本宽度 let h=this.fontSize/2; ctx.fillStyle=this.textColor; ctx.fillText(txt,width/2-w/2,height/2+h/2); if(degActive>=this.deg/100*360){//停止定时器 clearInterval(timer); timer=null; } degActive++; }.bind(this),this.timer); } };
原文地址:https://www.cnblogs.com/qinxuhui/p/11713495.html
- Linux RCU 机制详解
- 《Redis设计与实现》读书笔记(二十九) ——Redis集群执行命令与重新分片
- 如何使用C语言的面向对象
- 《Redis设计与实现》读书笔记(三十) ——Redis集群节点复制与故障转移
- 掌握一点儿统计学
- 高通HAL层之bmp18x.cpp
- Oracle 数据库之最:你见过最高的 SQL Version 是多少?
- Android 子activity关闭 向父activity传值
- 《Redis设计与实现》读书笔记(三十一) ——Redis集群消息类型
- 统计学中的相关性分析
- 《Redis设计与实现》读书笔记(三十二) ——Redis事务设计与实现
- 收藏一个简洁的PHP可逆加密函数
- 《Redis设计与实现》读书笔记(三十二) ——Redis集发布订阅设计与实现
- Android点击EditText文本框之外任何地方隐藏键盘的解决办法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP使用函数用法详解
- 读取nii或nii.gz文件中的信息即输出图像操作
- PHP实现SMTP邮件的发送实例
- 多个Laravel项目如何共用migrations详解
- PHP实现文字写入图片功能
- php中file_get_contents()函数用法实例
- PHP通过GD库实现验证码功能示例
- Thinkphp 5.0实现微信企业付款到零钱
- 使用npy转image图像并保存的实例
- php实现有序数组旋转后寻找最小值方法
- 基于python实现音乐播放器代码实例
- PHP实现微信对账单处理
- Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
- PHP Include文件实例讲解
- ThinkPHP5.1框架页面跳转及修改跳转页面模版示例