扁平网站常见的飘动的线条色带（乐普线条画布）
作者:admin 时间:2021-7-30 9:16:19 浏览:在很多扁平网站上，尤其是那些单页的HTML5扁平网站，常常见到有飘动的线条色带（乐普线条画布），觉得很好看，视觉效果特别好。以前我不知道如何实现的，今天刚好看到这个效果的源码，就收藏起来了，现在分享给大家，可以现拿现用，不复杂。
乐普线条画布
这个实现方法比较有意思，使用纯JS实现的线条飘动效果。
完整HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>乐普线条画布</title>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
background: #fff;
}
</style>
</head>
<body translate="no" >
<canvas id="canvas"></canvas>
<script src='simplex-noise.min.js'></script>
<script id="rendered-js" >
/*--------------------
Utility
--------------------*/
const lerp = (a, b, n) => (1 - n) * a + n * b;
/*--------------------
Setup
--------------------*/
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let time = 0;
const devicePixelRatio = window.devicePixelRatio || 1;
const w = 400;
const h = 400;
const simplex = new SimplexNoise();
const steps = 100;
const amplitude = 30;
const lines = 30;
/*--------------------
DrawLine
--------------------*/
const drawLine = (startY, t, seed) => {
const step = w / steps;
let x = -step;
let y = 0;
const arr = [];
for (let i = 0; i <= steps; i++) {
const n = simplex.noise2D((time * 0.001 + seed + i) * 0.02, (startY + time * t) * 0.0003);
x += step;
let amp = Math.min(i, 40);
if (i > steps - 40) amp = steps - i;
y = startY + n * amp;
arr.push({ x, y });
}
return arr;
};
/*--------------------
Clear
--------------------*/
const clear = () => {
ctx.clearRect(0, 0, w, h);
};
/*--------------------
Draw
--------------------*/
const draw = () => {
const p1 = drawLine(200, 1.1, 100);
const p2 = drawLine(200, 1.3, 200);
const p3 = drawLine(200, 1, 300);
const p4 = drawLine(200, 1.2, 150);
for (let r = 0; r <= lines; r++) {
const h = Math.floor(130 + r + time * 0.01);
ctx.strokeStyle = `hsla(${h}, 50%, 50%, .5)`;
document.body.style.backgroundColor = `hsl(${h}, 40%, 90%)`;
const s = 1 / lines;
ctx.beginPath();
for (let i = 0; i <= steps; i++) {
const type = i === 0 ? 'moveTo' : 'lineTo';
const x = lerp(p1[i].x, p2[i].x, r * s);
const y = lerp(p1[i].y, p2[i].y, r * s);
ctx[type](x, y);
}
ctx.stroke();
}
for (let r = 1; r <= lines; r++) {
const h = Math.floor(130 + lines + r + time * 0.01);
ctx.strokeStyle = `hsla(${h}, 50%, 50%, .5)`;
document.body.style.backgroundColor = `hsl(${h}, 40%, 90%)`;
const s = 1 / lines;
ctx.beginPath();
for (let i = 0; i <= steps; i++) {
const type = i === 0 ? 'moveTo' : 'lineTo';
const x = lerp(p2[i].x, p3[i].x, r * s);
const y = lerp(p2[i].y, p3[i].y, r * s);
ctx[type](x, y);
}
ctx.stroke();
}
};
/*--------------------
Animate
--------------------*/
const animate = () => {
time = window.performance.now();
clear();
requestAnimationFrame(animate);
draw();
};
animate();
/*--------------------
Resize
--------------------*/
const onResize = () => {
canvas.width = w * devicePixelRatio;
canvas.height = h * devicePixelRatio;
canvas.style.width = `${w}px`;
canvas.style.height = `${h}px`;
ctx.scale(devicePixelRatio, devicePixelRatio);
ctx.strokeWidth = 1;
animate();
};
onResize();
/*--------------------
Listeners
--------------------*/
window.addEventListener('resize', onResize);
//# sourceURL=pen.js
</script>
</body>
</html>
代码分析
可以看到，HTML代码仅包含一个canvas标签，和引用一个JS文件。
<canvas id="canvas"></canvas>
<script src='simplex-noise.min.js'></script>
这个JS文件是一个库文件，直接引用。实现效果的JS代码是这里面的代码：
<script id="rendered-js" >
... ...
</script>
我们可以通过修改JS代码的参数来改变线条的长度、高度、数量等：
/*--------------------
Setup
--------------------*/
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let time = 0;
const devicePixelRatio = window.devicePixelRatio || 1;
const w = 400;
const h = 400;
const simplex = new SimplexNoise();
const steps = 100;
const amplitude = 30;
const lines = 30;
此外，我们可以通过修改CSS属性来设置画布的属性，如阴影、背景：
canvas {
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
background: #fff;
}
标签: 线条画布
相关文章
x
- 站长推荐
