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

2021-12-10 18:33:32 阅读：200 来源： 互联网

标签：function CANVAS ctx 表盘 nimg 刻度 myCanvas var 104

效果：

图片素材：

画辅助圆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>

标签：function,CANVAS,ctx,表盘,nimg,刻度,myCanvas,var,104
来源： https://blog.csdn.net/qq_16494241/article/details/121862472

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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