canvas圆环百分比进度
来源:互联网 发布:wifi防蹭网软件 编辑:程序博客网 时间:2024/05/16 14:25
原文地址:http://www.qdfuns.com/notes/14070/0f51b3417c8afd96c10f0c141ae26544.html
canvas圆环进度
*{padding: 0; margin: 0; }
.circle{width: 200px;height: 200px;margin: 20em auto;position: relative;}
canvas{display: block;margin: 0;position: absolute;background: white;left: 0;top: 0;}
#canvas_1{z-index: 1 }
#canvas_2{z-index: 2; background: transparent;transform:rotate(-90deg); }
function inte(percent) {
var canvas_1 = document.querySelector('#canvas_1');
var canvas_2 = document.querySelector('#canvas_2');
var ctx_1 = canvas_1.getContext('2d');
var ctx_2 = canvas_2.getContext('2d');
ctx_1.lineWidth = 10;
ctx_1.strokeStyle = "#ccc";
//画底部的灰色圆环
ctx_1.beginPath();
ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
ctx_1.closePath();
ctx_1.stroke();
if (percent < 0 || percent > 100) {
throw new Error('percent must be between 0 and 100');
return
}
ctx_2.lineWidth = 10;
ctx_2.strokeStyle = "#f90";
var angle = 0;
var timer;
(function draw() {
timer = requestAnimationFrame(draw);
ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
//百分比圆环
ctx_2.beginPath();
ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
angle++;
var percentAge = parseInt((angle / 360) * 100)
if (angle > (percent / 100 * 360)) {
percentAge = percent
window.cancelAnimationFrame(timer);
};
ctx_2.stroke();
ctx_2.closePath();
ctx_2.save();
ctx_2.beginPath();
ctx_2.rotate(90 * Math.PI / 180)
ctx_2.font = '30px Arial';
ctx_2.fillStyle = 'red';
var text = percentAge + '%';
ctx_2.fillText(text, 80, -90);
ctx_2.closePath();
ctx_2.restore();
})()
}
window.onload = inte(60);
重点内容
阅读全文
0 0
- canvas圆环百分比进度
- canvas绘制圆环百分比进度的动态效果
- H5动画,canvas绘制圆环百分比进度的动态效果
- H5动画,canvas绘制圆环百分比进度的动态效果
- 用Canvas画圆环百分比进度条
- 有渐变色的进度圆环(带有百分比)
- canvas动画之一 -- 百分比进度加载
- 圆环百分比
- 圆环进度
- 圆环进度
- 自定义加载进度圆环(可以设置加载百分比的那种)
- 自定义view圆环跟随progressbar进度改变中心的texview(百分比)
- 圆环百分比自定义View
- 圆环形百分比统计
- echarts圆环百分比图示
- echarts圆环百分比图示
- 圆环百分比分布图
- 自定义进度圆环
- Swoole中异步连接客户端/请求API
- onTouchEvent
- 分针网——每日分享:JS常见工具(校验、通用)
- pyhton基础教程(学习笔记)
- Android Studio如果添加的是aar,要在gradle中,后面加上@aar
- canvas圆环百分比进度
- Adapter.notifyDataSetChanged()无效
- VBA字符串处理大全-from EH
- 520. Detect Capital
- AJAX使用回调函数
- MYSQL 优化常用方法
- c语言编程--c实现链表翻转
- vue项目启动之后出现cannot GET /
- Tomcat 优化方案 和 配置详解