现在有个需求想实现这个的效果

weixin_43863728 2019-09-03 09:50:42

搜索了很多例子都没有仪表盘外圈有加载的动画效果类似饼图的那种圆环加载效果
有大神能帮忙解决嘛

...全文

92 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2019-09-03

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400" style="background-color: #000033;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 15;
var num = 0;
var max = 500;
var r = Math.PI/180;
function draw(n) {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.strokeStyle = "#000099";
	ctx.shadowBlur = 0;
	ctx.beginPath();
	ctx.arc(200,200,150,120*r,420*r,false);
	ctx.stroke();
	ctx.strokeStyle = "#00FFFF";
	ctx.shadowColor = "#CCFFFF";
	ctx.shadowBlur = 20;
	ctx.beginPath();
	ctx.arc(200,200,150,120*r,(120+(420-120)*n)*r,false);
	ctx.stroke();
}
function animate() {
	draw(num/max);
	if (++num<=max)
		setTimeout(animate, 20);
}
animate();
</script>
</body>
</html>

天际的海浪 2019-09-03