看到別人網站上的畫布特效，覺得特別炫酷，然後自己就在網上學習了一些Canvas的基礎知識，附上鍊接：Canvas基礎
然後就借鑑下大神的代碼自己做了一個粒子線條特效，效果如下
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
//獲取canvas元素,並給canvas設置大小
var can = document.querySelector("canvas");
can.width = window.innerWidth;
can.height = window.innerHeight;
//canvas大小隨瀏覽器一起變化
window.onresize = function() {
can.width = window.innerWidth;
can.height = window.innerHeight;
};
//獲取2D繪圖環境
var ctx = can.getContext("2d");
//返回一個min和max之間的一個隨機整數
function randow(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
//返回一個min和max之間的一個隨機小數
function random(min, max) {
return Math.random() * (max - min) + min;
}
//用來存放每個圓的屬性
var dots = [];
//生成圓的個數
var arcNum = 100;
// 存儲n個不同屬性的圓
function createArc() {
for (var i = 0; i < arcNum; i++) {
//定義一個對象，將圓的屬性存儲起來
var arcObj = {
arcX: randow(0, window.innerWidth), //圓的X座標
arcY: randow(0, window.innerHeight), //圓的Y座標
arcR: 2, //圓的半徑
color: `rgba(${randow(0, 255)},${randow(0, 255)},${randow(
0,
255
)},${random(0, 1)})`,
suduX: random(-0.5, 0.5), //圓X軸速度
suduY: random(-0.5, 0.5) //圓Y軸速度
};
dots.push(arcObj);
}
}
createArc();
// 畫圓
function draw() {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
for (var i = 0; i < arcNum; i++) {
//讓圓動起來
dots[i].arcX += dots[i].suduX;
dots[i].arcY += dots[i].suduY;
ctx.beginPath();
ctx.fillStyle = dots[i].color;
ctx.arc(dots[i].arcX, dots[i].arcY, dots[i].arcR, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
//邊界檢測,將速度取反,實現碰撞
if (dots[i].arcX <= 0 || dots[i].arcX > window.innerWidth)
dots[i].suduX *= -1;
if (dots[i].arcY <= 0 || dots[i].arcY > window.innerHeight)
dots[i].suduY *= -1;
//利用勾股定理判斷是否連線 a*a+b*b=c*c
// Math.sqrt() 平方根
// Math.pow(a,b) a的b次方
for (var j = i + 1; j < arcNum; j++) {
if (
Math.sqrt(
Math.pow(dots[i].arcX - dots[j].arcX, 2) +
Math.pow(dots[i].arcY - dots[j].arcY, 2)
) < 100
) {
ctx.beginPath();
ctx.strokeStyle = dots[i].color;
ctx.moveTo(dots[i].arcX, dots[i].arcY);
ctx.lineTo(dots[j].arcX, dots[j].arcY);
ctx.closePath();
ctx.stroke();
}
}
}
}
setInterval(draw, 60 / 1000);
//添加鼠標移動事件
can.onmousemove = function(e) {
var ev = event || e;
var mouseX = ev.offsetX;
var mouseY = ev.offsetY;
for (var i = 0; i < arcNum; i++) {
if (
Math.sqrt(
Math.pow(dots[i].arcX - mouseX, 2) +
Math.pow(dots[i].arcY - mouseY, 2)
) < 100
) {
ctx.beginPath();
ctx.strokeStyle = dots[i].color;
ctx.moveTo(mouseX, mouseY);
ctx.lineTo(dots[i].arcX, dots[i].arcY);
ctx.closePath();
ctx.stroke();
}
}
};
</script>
</body>
</html>
如果喜歡就點個贊吧，(^_−)☆，小白寫的第一篇文章，謝謝大家的支持！
