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

在这里插入图片描述

<!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>
<!-- 
遮罩动画自然有两个图片 ，遮罩图片和被遮罩图片，当然了还得有一个透过遮罩图片看
被遮罩图片的圆形（本次）；

有几个需要注意的点；
	1，想要移动 圆形 看被遮罩图片就需要设置事件，但需要注意的是，需要不断刷新
	2，个人理解，圆形和被遮罩图片属于一个图片，就是说要变成一个整体，要和遮罩图片分开
 
 1，定义遮罩图片，被遮罩图片，圆的r,h,w
 2,在把作图的步骤放在函数内；
	分成两个部分，即每个部分分割开来 = 》beginPath；
		2.1；被遮罩图片
		2.2，遮罩图片和圆
			只显示圆覆盖的遮罩图片 = 》ctx.clip();
 3，不断刷新函数=》图片
 -->
posted @ 2022-04-02 09:48  coderwcb  阅读(44)  评论(0)  编辑  收藏  举报