使用CANVAS实现表盘刻度过渡效果
作者：互联网
效果：
图片素材：
测试代码：
<!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