当前位置：首页 > 下载站 > js特效 > html5特效 > HTML5+Canvas的黑洞特效

HTML5+Canvas的黑洞特效

分类: js特效 / html5特效	发布时间: 2017-12-22	访问量: 1744
下载量: 53

点击下载预览效果

更多>

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

16358 2025-08-28
CSS3 教程

1547090 2025-08-27
Rust 教程

23470 2025-08-27
Vue 教程

25899 2025-08-22
PostgreSQL 教程

22396 2025-08-21
Git 教程

9338 2025-08-21

HTML5+Canvas的黑洞特效

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>不要失去你的彩虹</title>

<style>
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>

</head>
<body>

<canvas id=c></canvas>

<script>
let w = c.width = window.innerWidth;
let h = c.height = window.innerHeight;

const ctx = c.getContext('2d');
const opts = {
hexLength: 30,
lenFn: ({ len, t }) =>
len + Math.sin(t),
radFn: ({ rad, len, t, excitement }) =>
rad + (excitement + opts.propFn({ len, t }))*2 / 4,
propFn: ({ len, t }) =>
len / opts.hexLength / 10 - t,
excitementFn: ({ len, t }) =>
Math.sin(opts.propFn({ len, t }))**2,
colorFn: ({ rad, excitement, t }) =>
`hsl(${rad / Math.TAU * 360 + t}, ${excitement * 100}%, ${20 + excitement * 50}%)`,
timeStep: .01,
randomJig: 8,

repaintColor: 'rgba(0,0,0,.1)'
};
let tick = 0;

Math.TAU = 6.28318530717958647692;

const vertices = [];
class Vertex {
constructor({ x, y }) {
this.len = Math.sqrt(x*x + y*y);
this.rad = Math.acos(x / this.len) * (y > 0 ? 1 : -1) + .13;
this.prevPoint = { x, y };
}

step() {
const excitement = opts.excitementFn({ len: this.len, t: tick });
const param = {
len: this.len,
rad: this.rad,
t: tick,
excitement
};
const nextLen = opts.lenFn(param);
const nextRad = opts.radFn(param);
const color = opts.colorFn(param);

ctx.strokeStyle = color;
ctx.lineWidth = excitement + .2;
ctx.beginPath();
ctx.moveTo(this.prevPoint.x, this.prevPoint.y);
this.prevPoint.x = nextLen * Math.cos(nextRad) +
Math.random() * (1-excitement)**2 * opts.randomJig * 2 - opts.randomJig;
this.prevPoint.y = nextLen * Math.sin(nextRad) +
Math.random() * (1-excitement)**2 * opts.randomJig * 2 - opts.randomJig;
ctx.lineTo(this.prevPoint.x, this.prevPoint.y);
ctx.stroke();
}

static gen() {
vertices.length = 0;
const hexCos = Math.cos(Math.TAU / 12) * opts.hexLength;
const hexSin = Math.sin(Math.TAU / 12) * opts.hexLength;


let alternanceX = false;
for(let x = 0; x < w; x += hexCos) {
let alternance = alternanceX = !alternanceX;
for(let y = 0; y < h; y += hexSin + opts.hexLength) {
alternance = !alternance;
vertices.push(new Vertex({
x: x - w / 2,
y: y + alternance * hexSin - h / 2
}))
}
}

}
}

Vertex.gen();

ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
const anim = () => {
window.requestAnimationFrame(anim);

tick += opts.timeStep;

ctx.fillStyle = opts.repaintColor;
ctx.fillRect(0, 0, w, h);

ctx.translate(w/2, h/2);
vertices.forEach((vertex) => vertex.step());
ctx.translate(-w/2, -h/2);
}
anim();

window.addEventListener('resize', () => {
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;

Vertex.gen();
tick = 0;
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
})
</script>

</body>

</html>

这是一个HTML5+Canvas的黑洞特效，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。