动画效果之PC端移动端探照灯遮罩动画

╰半夏微凉° 2023-06-07 12:16 5阅读 0赞

![在这里插入图片描述][20191015095046401.gif]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>遮罩动画</title>
    	</head>
    	<body>
    		<canvas id="canvas" width="400" height="300" style="border: 1px solid red;"></canvas>
    		<script type="text/javascript">
    			var canvas = document.getElementById("canvas");
    			var ctx = canvas.getContext('2d');
    			var H = 400,
    				W = 500;
    			//定义圆的大小以及最初的位置
    			var tempR = 100;
    			var tempH = Math.floor(Math.random() * H);
    			var tempW = Math.floor(Math.random() * W);
    			//定义一个圆的对象,即到时候显示的区域,包括半径和初始显示位置
    			var ball = { 
    				x: tempW,
    				y: tempH,
    				r: tempR
    			}
    			//上下两张图片
    			var img1 = new Image();
    			var img2 = new Image();
    			img1.src = 'img/1.png';
    			img2.src = 'img/2.png';
    
    			function render() { 
    				//不加这句话也可以,我只是让效果明显一点
    				canvas.height = H;
    
    				ctx.save();
    				ctx.beginPath();
    				ctx.drawImage(img2, 0, 0)
    				ctx.beginPath()
    				ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
    				ctx.fillStyle = 'red';
    				ctx.fill();
    				ctx.clip();
    				//由于使用了clip()，画布背景图片会出现在clip()区域内
    				ctx.drawImage(img1, 0, 0)
    				ctx.restore();
    			}
    			// render()
    			setInterval(render, 50);
    			//pc端移动
    			canvas.onmousemove = function(e) { 
    				ball.x = e.offsetX;
    				ball.y = e.offsetY;
    			}
    			// 手机端移动
    			canvas.addEventListener('touchmove', function(e) { 
    				console.log(e.changedTouches[0].pageX)
    				ball.x = e.changedTouches[0].pageX;
    				ball.y = e.changedTouches[0].pageY;
    			})
    		</script>
    	</body>
    </html>

[20191015095046401.gif]: /images/20230601/ab9e3ec932af43b593052ae1b9bc1e27.png