怎么在html5中使用canvas实现光线沿不规则路径运动-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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

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

从网站建设到定制行业解决方案，为提供网站建设、网站制作服务体系，各种行业企业客户提供网站建设解决方案，助力业务快速发展。成都创新互联将不断加快创新步伐，提供优质的建站服务。

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

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

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


	
	
		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%;
		    }
		}
	
	
		路径偏移

角度偏移

此种方式的限制是滚动元素无法随路径进行没有规律的变化

使用stroke-dasharray和stroke-dashoffset让路径边线动起来

stroke-dasharray:设置shap和text 边框虚线的实线长度与实线之间的间隔（虚线长度）
stroke-dashoffser:设置边框线条相对于默认位置的偏移（正值：向左，负值：向右）


	
	
		stroke-dasharray/stroke-dashoffser
	
	
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		body {
			background: #000;
			color: #fff;
		}
		.move {
			animation: moving 5s infinite;
		}
		@keyframes moving {
			0% {
				stroke-dashoffset: 80px;
			}
			100% {
				stroke-dashoffset: -1600px;
			}
		}
	
	
	设置stroke-dasharray
	storke-dasharray设置为80 ，此时实线和实线间隔一样
	
		
	
	storke-dasharray设置为80 320，此时实线和是实线间隔的1/4
	
		
	
	设置stroke-dashoffset让边线相对于初始位置发生偏移
	
		
	
	通过设置stroke-dasharray 和 stroke-dashoffset让边线动起来

此种方式通过边框偏移的效果可以设置跟随路径的滚线条，但是无法设置线条的光线效果，即实线的阴影和实线的渐变效果（渐变区域需随着偏移路径的变化而变化）

canvas实现线条延不规则路径运动

线条实现

对于不规则路径，如果直接用画线条的方式实现光线，需要计算每一个开始点和结束点的位置，中间还可能存在转折点，计算起来非常麻烦，不可取
故这边采取canvas组合图形的模式，取线条和一个图形重叠部分（类似于灯罩）来实现光线效果

组合前

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

组合后

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


	
	
		canvas实现不规则路径光效
	
	
		body {
			background: #000;
		}
		#wrap {
			position: absolute;
			width: 1200px;
			height: 600px
		}

让线条动起来

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

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


	
	
		canvas实现不规则路径光效
	
	
		body {
			background: #000;
		}
		#wrap {
			position: absolute;
			width: 1200px;
			height: 600px
		}

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

本文题目：怎么在html5中使用canvas实现光线沿不规则路径运动
标题链接：http://scgulin.cn/article/goejhi.html

新闻中心

路径偏移

角度偏移

设置stroke-dasharray

设置stroke-dashoffset让边线相对于初始位置发生偏移

通过设置stroke-dasharray 和 stroke-dashoffset让边线动起来

其他资讯