使用CANVAS实现表盘刻度过渡效果

最新推荐文章于 2024-04-01 05:14:19 发布

羽筠

最新推荐文章于 2024-04-01 05:14:19 发布

阅读量785

点赞数

本文链接：https://blog.csdn.net/qq_16494241/article/details/121862472

版权

canvas

效果：

图片素材：

画辅助圆207*207 表盘底图198*75 表盘亮色图198*75

测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=750, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
</head>

<body>

<div style="padding:10px;text-align:center;font-size:24px;">
	<p>根据素材图片画辅助圆，获得CANVAS中画图数据</p>
</div>

<div style="padding:10px;display:flex;justify-content:center;align-items:center;">
	<img title="画辅助圆207*207" src="test3.png" >
</div>

<div style="padding:10px;text-align:center;font-size:24px;">
	<p>素材图片如下：</p>
</div>
<div style="padding:10px;display:flex;justify-content:center;align-items:center;">
	<img title="表盘底图198*75" src="test1.png" >
	<img title="表盘亮色图198*75" src="test2.png" >
</div>

<div style="padding:10px;text-align:center;font-size:24px;">
	<p>展示：</p>
</div>
<div style="position:relative;width:198px;margin:0 auto;overflow:hidden;">
	<img src="test1.png" >
	<canvas id="myCanvas" width="207" height="207" style="position:absolute;left:50%;transform:translateX(-50%);top:0;"></canvas>
</div>

<script type="text/javascript">
	var myCanvas = document.getElementById("myCanvas");
	var ctx = myCanvas.getContext("2d");
	var nimg = new Image();
	nimg.src = 'test2.png';
	var i = 16, // 起始16 (亮色表盘左侧起点)
	maxNum = 90, // 结束164 (亮色表盘满格显示)
	timer;
	nimg.onload = function (){
		setTimeout(function(){
			timer = setInterval(setArc,10);
		},500);
		function setArc(){
			i++;
			if(i > maxNum){
				clearInterval(timer);
			}
			console.log(i);
			ctx.clearRect(0,0,207,207);
			ctx.fillStyle = "rgba(0,0,0,0)";
			ctx.beginPath();
			ctx.lineTo(104,104);
			ctx.arc(104,104,103,Math.PI,((0.5/90)*i+1)*Math.PI);
			ctx.closePath();
			ctx.fill();
			ctx.save();
			ctx.clip();
			ctx.drawImage(nimg,4,1);
			ctx.restore();
		}
	}
</script>

</body>
</html>