html5 canvas 实现光线沿不规则路径运动
程序员文章站
2022-04-23 18:33:48
这篇文章主要介绍了html5 canvas 实现光线沿不规则路径运动,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下... 20-04-20...
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>
<h2>路径偏移</h2>
<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>
<h2>角度偏移</h2>
<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>
<h2>设置stroke-dasharray</h2>
<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>
<h2>设置stroke-dashoffset让边线相对于初始位置发生偏移</h2>
<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>
<h2>通过设置stroke-dasharray 和 stroke-dashoffset让边线动起来</h2>
<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组合图形的模式，取线条和一个图形重叠部分（类似于灯罩）来实现光线效果
组合前
组合后
<!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-over
ctx.globalcompositeoperation = "destination-in";
ctx.linewidth = 60;
ctx.beginpath();
ctx.moveto(40, 80);
ctx.lineto(200, 80);
ctx.stroke();
}
drawline();
</script>
</html>
让线条动起来
当我们实现好线条剩下就需要让线条动起来，由于线条是通过灯罩的方式来实现的，让线条运动只需要让灯罩动起来就好
<!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 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);
</script>
</html>
这种实现方式也有一定的条件限制，那就是路径可大体抽象成为一个有一定规律的图型或者线条，比如上面demo中路径可抽象成为一个矩形的两边，或者是2条连接的直线
我们必须从没有具体规则的路径中抽象出一个大体的规则，不同路径规则不同
上面的例子就是将不规则路径抽象成了一个直角的规则路径
可优化点
这边找到了2个可优化的点
1.时间方向上： 为了让动画消耗较小，代码中的定时器已经用的是requestanimationframe, 但是由于光线的特殊性（自带模糊效果），为了性能更加，尝试了2次requestanimationframe调用一次绘图的方式，效果较前者未有明显区别
2.绘图方向上： 从上图可发现，灯罩每次只圈出路径的一部分，故绘图中不需要每次都绘制全部路径，只需要找出灯罩前后的路径点，将这一段路径绘制出来就好
坑点
在完成这个动动画效果之后遇到一个至今原因不明的bug，随着屏幕放置时间的变长，动画越来越慢，打开任务管理器，未见内存泄漏或者cpu使用率过高。打开performance，发现页面调帧严重，屏幕帧数越来越低，单个frame cpu time越来越长，范围来看，script和render和paint耗时未发生线性变化，只有system时间越来越来长，越来越长，期望能被大佬告知原因
一开始
到后来
解决的办法较为...，光线每循环一个周期，我销毁了之前的canvas并新建了canvas，上层规避了system time不知道为什么越来越长的问题
chrome版本：80.0.3987.163（正式版本） （64 位）
到此这篇关于html5 canvas 实现光线沿不规则路径运动的文章就介绍到这了,更多相关canvas 光线不规则运动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
上一篇： R语言数据的输入和输出操作
下一篇： 再来