117 lines
2.6 KiB
JavaScript
117 lines
2.6 KiB
JavaScript
// 清理默认样式
|
|
document.body.style.margin = 0
|
|
document.body.style.padding = 0
|
|
document.body.style.overflow = 'hidden'
|
|
|
|
// 创建一个画布
|
|
const canvas = document.createElement('canvas')
|
|
document.body.appendChild(canvas)
|
|
|
|
// 画布填满屏幕
|
|
const ctx = canvas.getContext('2d')
|
|
const width = canvas.width = window.innerWidth
|
|
const height = canvas.height = window.innerHeight
|
|
|
|
// 画布中心点
|
|
const centerX = width / 2
|
|
const centerY = height / 2
|
|
|
|
// 画布中心点的偏移量
|
|
const offsetX = 0
|
|
const offsetY = 0
|
|
|
|
// 准备一千个小圆点作为粒子
|
|
const particles = []
|
|
const particleCount = 1000
|
|
|
|
// 生成粒子
|
|
for (let i = 0; i < particleCount; i++) {
|
|
particles.push({
|
|
x: Math.random() * width,
|
|
y: Math.random() * height,
|
|
vx: Math.random() * 10 - 5,
|
|
vy: Math.random() * 10 - 5,
|
|
radius: Math.random() * 1 + 1
|
|
})
|
|
}
|
|
|
|
// 绘制粒子
|
|
function drawParticles () {
|
|
ctx.fillStyle = '#ff1414'
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = particles[i]
|
|
ctx.beginPath()
|
|
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2)
|
|
ctx.fill()
|
|
}
|
|
}
|
|
|
|
// 绘制粒子的连线
|
|
function drawParticlesLine () {
|
|
ctx.strokeStyle = '#ff1414'
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = particles[i]
|
|
for (let j = 0; j < particleCount; j++) {
|
|
const otherParticle = particles[j]
|
|
const dx = particle.x - otherParticle.x
|
|
const dy = particle.y - otherParticle.y
|
|
const dist = Math.sqrt(dx * dx + dy * dy)
|
|
if (dist < 100) {
|
|
ctx.beginPath()
|
|
ctx.moveTo(particle.x, particle.y)
|
|
ctx.lineTo(otherParticle.x, otherParticle.y)
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 粒子颜色为红色, 大小为 2px
|
|
function drawParticles2 () {
|
|
ctx.fillStyle = '#ff1414'
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = particles[i]
|
|
ctx.beginPath()
|
|
ctx.arc(particle.x, particle.y, 2, 0, Math.PI * 2)
|
|
ctx.fill()
|
|
}
|
|
}
|
|
|
|
// 将粒子的位置更新到下一帧
|
|
function updateParticles () {
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = particles[i]
|
|
particle.x += particle.vx
|
|
particle.y += particle.vy
|
|
if (particle.x < 0) {
|
|
particle.x = width
|
|
}
|
|
if (particle.x > width) {
|
|
particle.x = 0
|
|
}
|
|
if (particle.y < 0) {
|
|
particle.y = height
|
|
}
|
|
if (particle.y > height) {
|
|
particle.y = 0
|
|
}
|
|
}
|
|
}
|
|
|
|
// 清空画布
|
|
function clear () {
|
|
ctx.clearRect(0, 0, width, height)
|
|
}
|
|
|
|
// 绘制
|
|
function draw () {
|
|
clear()
|
|
drawParticles()
|
|
drawParticlesLine()
|
|
updateParticles()
|
|
requestAnimationFrame(draw)
|
|
}
|
|
|
|
// 开始绘制
|
|
draw()
|