前端开发canvas圆环百分比进度
摘要：web前端开发工作怎么样 前端开发的工作怎么样 web前端开发工作岗位 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta http-equiv=”……
web前端开发工作怎么样 前端开发的工作怎么样 web前端开发工作岗位
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>canvas圆环进度</title>
<link rel=”stylesheet” href=””>
<style>
* {
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);
}
</style>
</head>
<body>
<div class=”circle”>
<canvas id=”canvas_1″ width=”200″ height=”200″></canvas>
<canvas id=”canvas_2″ width=”200″ height=”200″></canvas>
</div>
<script>
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);
</script>
</body>
</html>
前端开发师工作内容 开发oa系统前端工作流程 前端开发工作经常加班吗
» 本文来自：前端开发者 » 《前端开发canvas圆环百分比进度》
» 本文链接地址：https://www.rokub.com/5848.html
» 您也可以订阅本站：https://www.rokub.com
近期评论