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

2023-06-09 11:06:02 193人浏览薄情痞子

摘要

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

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

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

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

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

<!DOCTYPE html><html><head><title>offset-path/offset-roate</title></head><style type="text/CSS">* {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%;    }}</style><body><h3>路径偏移</h3><div class="line"></div><svg width="100%" height="600px" version="1.0" id="svg1"><path d="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" fill="#tranparent" stroke="#FFF"></path></svg><h3>角度偏移</h3><div class="line1"></div></body></html>

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

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

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

<!DOCTYPE html><html><head><title>stroke-dasharray/stroke-dashoffser</title></head><style type="text/css">* {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;}}</style><body><h3>设置stroke-dasharray</h3><b>storke-dasharray设置为80 ，此时实线和实线间隔一样</b><svg width="100%" height="600px" version="1.0" id="svg1"><path d="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" fill="#tranparent" stroke="#FFF" stroke-dasharray="80"></path></svg><b>storke-dasharray设置为80 320，此时实线和是实线间隔的1/4</b><svg width="100%" height="600px" version="1.0" id="svg1"><path d="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" fill="#tranparent" stroke="#FFF" stroke-dasharray="80 320"></path></svg><h3>设置stroke-dashoffset让边线相对于初始位置发生偏移</h3><svg width="100%" height="600px" version="1.0" id="svg1"><path d="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" fill="#tranparent" stroke="#FFF" stroke-dasharray="80 320" stroke-dashoffset="40"></path></svg><h3>通过设置stroke-dasharray 和 stroke-dashoffset让边线动起来</h3><svg width="100%" height="600px" version="1.0" id="svg1"><path d="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" fill="#tranparent" stroke="#FFF"></path><path d="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" fill="#tranparent" stroke="red" stroke-dasharray="80 1600" stroke-dashoffset="0" class="move"></path></svg></body></html>

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

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

线条实现

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

组合前

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

组合后

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

<!DOCTYPE html><html><head><title>canvas实现不规则路径光效</title></head><style type="text/css">body {background: #000;}#wrap {position: absolute;width: 1200px;height: 600px}</style><body><div id="wrap"><canvas id="canvas" width="1200" height="600"></canvas></div></body><script type="text/javascript">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 canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.strokeStyle = 'rgba(255,255,255,1)';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);});ctx.stroke();}drawPath();function drawLine() {//设置图形组合方式 默认source-overctx.globalCompositeOperation = "destination-in";ctx.lineWidth = 60;ctx.beginPath();ctx.moveTo(40, 80);ctx.lineTo(200, 80);ctx.stroke();}drawLine();</script></html>

让线条动起来

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

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

<!DOCTYPE html><html><head><title>canvas实现不规则路径光效</title></head><style type="text/css">body {background: #000;}#wrap {position: absolute;width: 1200px;height: 600px}</style><body><div id="wrap"><canvas id="canvas" width="1200" height="600"></canvas></div></body><script type="text/javascript">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 isEndarrLine = 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-overctx.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);</script></html>

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

--结束END--

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

本文链接: https://lsjlt.com/news/255742.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341