怎么在html5中使用canvas实现光线沿不规则路径运动-创新互联

这篇文章将为大家详细讲解有关怎么在html5中使用canvas 实现光线沿不规则路径运动，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

svg让动画沿着不规则路径运动

查阅svg文档后发现，svg动画运动有两种实现方式，且都非常简单，但对于100%实现设计师给出的效果有很大的距离

使用offset-path偏移路径和offset-roate偏移角度让元素沿着不规则路径走

	
	
		
	
	
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		body {
			background: #000;
		}
		.line {
			width: 80px;
			height: 3px;
	        position: absolute;
	        background: red;
			offset-path: path("M10 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");
	        animation: move 10s linear infinite;
		}
		@keyframes move {
			100% {
				offset-distance: 2000px;
			}
		}
		.line1 {
			position: absolute;
			left: 100px;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: red;
			offset-path: path("M0,0a72.5,72.5 0 1,0 145,0a72.5,72.5 0 1,0 -145,0");
	   		offset-rotate: 0deg;
	   		animation: load 1.8s cubic-bezier(0.86, 0, 0.07, 1) infinite;
	   		animation-delay: 0.147s;
	    	animation-fill-mode: forwards;
		}
		@keyframes load {
			from {
		        offset-distance: 0;
		    }
		    to {
		        offset-distance: 100%;
		    }
		}
	
	
		
路径偏移