先看效果（完整代碼在底部）：
<iframe id="erZucf9s-1618058076985" src="https://player.bilibili.com/player.html?aid=930021333" allowfullscreen="true" data-mediaembed="bilibili"></iframe>
實作程序（可一步一步實作）：
1.定義標簽與基本css樣式：
<canvas id="canvas"></canvas>
canvas{
display: block;
}
2. 開始正式js部分，先獲取畫布：
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
3.定義基本變數：
// 畫布寬與高
var kuan=0,gao=0;
// 線條數量
var num=25;
//陣列，存盤每條線的基本資訊
var arr=[];
// 存幾個喜歡的顏色后面給線條
var colors = ["#2196F3","#1976D2","#00BCD4","#4CAF50","#FF5252","#E040FB"];
4. 使得畫布動態與視窗一樣大小，直接copy該方法就行，順便定義初始滑鼠位置變數為畫布的中間位置：
window.onresize=resizeCanvas;
function resizeCanvas(){
kuan=canvas.width=window.innerWidth;
gao=canvas.height=window.innerHeight;
}
resizeCanvas();
var mouseX = kuan/2,mouseY = gao/2;
5. 初始化陣列，初始化每條線條的基本資訊：
注：Math.random()*(max-min) + min 為隨機獲取min到max間的一個數，
for(let i=0;i<num;i++){
arr.push({
// 線條的寬度
r: Math.random()*(5-3) + 3,
// 線條的顏色
color: colors[parseInt(Math.random()*6)],
/* 線條最初始小點所在旋轉圓上的位置，就是在旋轉開始的角度 */
rot: Math.random()*2*Math.PI,
/* 線條與旋轉圓中心的距離 */
distance: Math.random() * (75 - 40) + 40,
/* 記錄初始位置，后面滑鼠拖拽時做緩動影片用 */
lastMouse:{
x:kuan/2,
y:gao/2
}
})
}
6.系結滑鼠移動事件：
window.addEventListener('mousemove',function(event){
mouseX = event.clientX;
mouseY = event.clientY;
})
7.執行更新操作，在更新里呼叫繪制：
注意：在一個圓上，坐標 x=cos（…）× r，y = sin（…）× r ，
cos（.）與sin（.）取值范圍為【-1,1】，細品，
function update (){
for(let i=0;i<num;i++){
//先保存上一幀的位置與i值
let last ={x:arr[i].x,y:arr[i].y,i:i};
// 移動后位置 = 當前位置 + （移動后位置-當前位置）*0.05 緩動影片原理
arr[i].lastMouse.x+=(mouseX-arr[i].lastMouse.x)*0.05;
arr[i].lastMouse.y+=(mouseY-arr[i].lastMouse.y)*0.05;
// 角度改變，就是進行旋轉
arr[i].rot+=0.1;
// 坐標X改變
arr[i].x = arr[i].lastMouse.x + Math.cos(arr[i].rot)*arr[i].distance;
// 坐標y改變
arr[i].y = arr[i].lastMouse.y + Math.sin(arr[i].rot)*arr[i].distance;
/* 位置改變了，把last傳給draw，得到不同兩點后繪制畫線 */
draw(last);
}
}
8. 繪制：
function draw(last) {
var yuan = arr[last.i];
// 開始繪制
ctx.beginPath();
//顏色
ctx.strokeStyle = yuan.color;
// 寬度
ctx.lineWidth = yuan.r;
ctx.moveTo(last.x,last.y);
ctx.lineTo(yuan.x,yuan.y);
ctx.stroke();
ctx.closePath();
}
9. 設定定時器，同時實作線條尾部慢慢消失效果：
setInterval(function(){
/* ctx.clearRect(0,0,kuan,gao); */
/* 不直接用clearRect讓上一幀內容全部變透明，而是逐漸給上一幀
蒙上一層有點透明的當前背景色，這樣一幀一幀的疊加，最開始的線段
會逐漸與背景融合變得相當與消失 */
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0,0,kuan,gao);
update();
/* draw(); */
},20)
完整代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(0, 0, 0);
}
canvas{
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
// 畫布寬與高
var kuan=0,gao=0;
var num=25;
var arr=[];
var colors = ["#2196F3","#1976D2","#00BCD4","#4CAF50","#FF5252","#E040FB"];
window.onresize=resizeCanvas;
function resizeCanvas(){
kuan=canvas.width=window.innerWidth;
gao=canvas.height=window.innerHeight;
}
resizeCanvas();
var mouseX = kuan/2,mouseY = gao/2;
for(let i=0;i<num;i++){
arr.push({
/* x: kuan/2,
y: gao/2, */
r: Math.random()*(5-3) + 3,
color: colors[parseInt(Math.random()*6)],
/* 旋轉開始角度 */
rot: Math.random()*2*Math.PI,
/* 旋轉小球距離中心距離 */
distance: Math.random() * (75 - 40) + 40,
/* 記錄初始位置，滑鼠拖拽時做緩動影片用 */
lastMouse:{
x:kuan/2,
y:gao/2
}
})
}
function draw(last) {
/* for(let i=0;i<num;i++){ */
var yuan = arr[last.i];
ctx.beginPath();
/* ctx.fillStyle = yuan.color;
ctx.arc(yuan.x,yuan.y,yuan.r, 0,Math.PI* 2, false);
ctx.fill(); */
ctx.strokeStyle = yuan.color;
ctx.lineWidth = yuan.r;
ctx.moveTo(last.x,last.y);
ctx.lineTo(yuan.x,yuan.y);
ctx.stroke();
ctx.closePath();
/* } */
}
window.addEventListener('mousemove',function(event){
mouseX = event.clientX;
mouseY = event.clientY;
})
/* var moveX=kuan/2,moveY=gao/2; */
function update (){
for(let i=0;i<num;i++){
/* 傳當前繪制的第i個的線的繪制前一幀的位置和當前i保存 */
let last ={x:arr[i].x,y:arr[i].y,i:i};
/* 移動后位置 = 當前位置 + （移動后位置-當前位置）*0.05 緩動影片原理 */
arr[i].lastMouse.x+=(mouseX-arr[i].lastMouse.x)*0.05;
arr[i].lastMouse.y+=(mouseY-arr[i].lastMouse.y)*0.05;
arr[i].rot+=0.1;
arr[i].x = arr[i].lastMouse.x + Math.cos(arr[i].rot)*arr[i].distance;
arr[i].y = arr[i].lastMouse.y + Math.sin(arr[i].rot)*arr[i].distance;
/* 位置改變，把last傳給draw，畫線 */
draw(last);
}
}
setInterval(function(){
/* ctx.clearRect(0,0,kuan,gao); */
/* 不直接用clearRect讓上一幀內容全部變透明，而是逐漸給上一幀
蒙上一層有點透明的當前背景色，這樣一幀一幀的疊加，最開始的小球
會逐漸與背景融合變得相當與消失 */
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0,0,kuan,gao);
update();
/* draw(); */
},20)
</script>
</body>
</html>
總結：
這是我的B站賬號~：https://space.bilibili.com/176586698
敲鑼打鼓~
關注一波~
會有更多有意思的東西~
大概~
其它文章：
炫彩流光文字 html+css
氣泡浮動背景特效 html+css
簡約時鐘特效 html+css+js
賽博朋克風格按鈕 html+css
仿網易云官網輪播圖 html+css+js
水波加載影片 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
霓虹燈繪畫板效果 html+css+js
記一些css屬性總結（一）
Sass總結筆記
…等
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/274818.html
標籤：其他