效果图：
lights.gif
参考效果地址：http://www.jq22.com/code2329
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
background: rgb(31, 30, 30);
display: flex;
justify-content: center;
align-items: center;
}
p {
text-align: center;
width: 100%;
color: rgb(218, 66, 66);
font-size: 6em;
font-family: 'Poiret One', cursive;
letter-spacing: 6px;
text-align: center;
font-weight: 100;
}
#canvas {
display: block;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<p>Liquid Lights</p>
</body>
<script>
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d");
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;
let ballArray = []
//监听窗口加载完毕执行
//监听窗口改变时执行
window.addEventListener('load', resize);
window.addEventListener('resize', resize, false);
//获取一个随机的整数
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//定义一个随机颜色
function rndCol() {
var r = Math.floor(Math.random() * 180);
var g = Math.floor(Math.random() * 60);
var b = Math.floor(Math.random() * 100);
return "rgb(" + r + "," + g + "," + b + ")";
}
//获取当前窗口宽高方法
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.log(canvas.width, canvas.height)
}
//绘制圆球方法
function draw() {
//定义小球的位置，半径，偏移量
let ball = {
x: random(0, w),
y: random(0, h),
r: random(20, 80),
cX: random(-1, 1),
cY: random(-1, 1)
}
ballArray.push(ball);
// console.log(ballArray)
//因为此方法会随着 requestAnimationFrame 每帧基本都在执行，所以给出一个临界值避免资源浪费
while (ballArray.length > 100) {
//当球的数量超过100时，删除第一个值
ballArray.shift();
}
//清除画布尾迹
ctx.clearRect(0, 0, w, h);
// 通过遍历数组里面的每个球，实现每个球在每一帧的情况下都会进行改变
for (let i = 0; i < ballArray.length; i++) {
ball = ballArray[i];
ctx.fillStyle = rndCol();
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2); //绘制圆球
ctx.shadowBlur = 80;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowColor = rndCol();
// globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
// https://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp
ctx.globalCompositeOperation = 'lighter';
ctx.fill()
//实现小球位置的变化和越来越小
ball.x += ball.cX;
ball.y += ball.cY;
ball.r *= 0.96;
}
}
function animation() {
// 相当于每一帧都会执行一次方法
window.requestAnimationFrame(animation)
draw()
}
animation()
</script>
</html>
网友评论