让线条动起来

当我们实现好线条剩下就需要让线条动起来，由于线条是通过灯罩的方式来实现的，让线条运动只需要让灯罩动起来就好
 

	
	
		
	
	
		body {
			background: #000;
		}
		#wrap {
			position: absolute;
			width: 1200px;
			height: 600px
		}
	
	
		
			
		
	
	
		var path = 'M 10 80 L 77.5 60 L 145 80 L 280 100 L 500 80 L 600 120 L 800 80 L 950 120 L 950 200 L 930 250 L 950 300 L 950 500';
		var list = path.match(/([A-Z]([^A-Z]){1,})/g).map(item => {
			return {
				x: item.split(' ')[1],
				y: item.split(' ')[2],
				action: item.split(' ')[0],
			}
		});//获取每个点位置
		var step = 3;
		var x1, x2, y1, y2;//确定路径中最大最小点
		var timer;
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		ctx.strokeStyle = 'rgba(255,255,255,1)';
		ctx.shadowColor = 'rgba(255,255,255,1)';
		ctx.lineCap = 'round';
		ctx.shadowBlur = 3;
		list.forEach(item => {
			x1 = !x1 || Number(item.x) < x1 ? Number(item.x) : x1;
			y1 = !y1 || Number(item.y) < y1 ? Number(item.y) : y1;
			x2 = !x2 || Number(item.x) > x2 ? Number(item.x) : x2;
			y2 = !y2 || Number(item.y) > y2 ? Number(item.y) : y2;
		});
		function drawPath() {
			ctx.lineWidth = 3;
			ctx.beginPath();
			list.forEach(item => {
				if(item.action == 'M') ctx.moveTo(item.x, item.y);
				if(item.action == 'L') ctx.lineTo(item.x, item.y);
			});
			//添加光效渐变
			var grd = ctx.createLinearGradient(arrLine[arrLine.length - 1].x, arrLine[arrLine.length - 1].y, arrLine[0].x, arrLine[0].y);
			grd.addColorStop(0, 'rgba(255, 255, 255, 0)');   //定义渐变线起点颜色
	        grd.addColorStop(1, 'rgba(255, 255, 255, 1)');  //定义渐变线结束点的颜色
	        ctx.strokeStyle = grd;
			ctx.stroke();
		}
		//设计合适的初始线条状态
		var arrLine = Array(10).fill(0).map((item, inx) => {
			return {
				x: x1 - 20 * inx,
				y: y1 + 30,
			}
		});
		//随时间变化图形路径
		function getArrLine() {
			var isEnd
			arrLine = arrLine.map(item => {
				var x = item.x;
				var y = item.y;
				if(x < x2 - 30) {
					x = x + step > x2 -30 ? x2 - 30 : x + step;
				} else if(x == x2 -30 && y < y2) {
					y = y + step > y2 ? y2 : y + step;
				} else {
					isEnd = true;
				}
				return {
					x,
					y
				}
			});
			isEnd && timer && cancelAnimationFrame(timer);
		}
		//绘制图形
		function drawLine() {
			//设置图形组合方式 默认source-over
			ctx.globalCompositeOperation = "destination-in";
			ctx.lineWidth = 70;
			ctx.beginPath();
			arrLine.forEach((item, inx) => {
				if(inx == 0) {
					ctx.moveTo(item.x, item.y);
				} else {
					ctx.lineTo(item.x, item.y);
				}
			})
			ctx.stroke();
		}

		function start() {
			ctx.clearRect(0, 0, 1200, 600);
			ctx.globalCompositeOperation = 'source-over';
			drawPath();
			drawLine();
			getArrLine();
			timer = requestAnimationFrame(start);
		}

		timer = requestAnimationFrame(start);

	
	

关于怎么在html5中使用canvas 实现光线沿不规则路径运动就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。