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

HTML5+Canvas的黑洞特效

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

点击下载预览效果

更多>

最新下载

iPicker多级联动城市选择组件

jQuery iPicker城市选择插件，利用json动态调用城市地区数据，支持多级联动城市选择，设置获取值选择结果。这是一款简单快速的对 “省市区” 城市选择代码。ps：使用ajax本地要在localhost才能正常访问。

0 2026-01-27

CSS3实现3D图片翻转洗牌特效

CSS3实现3D图片翻转洗牌特效是一款鼠标悬停到缩略图片3D翻转切换显示代码，支持触摸设备使用。

0 2026-01-27

vue.js表单密码强度验证代码

vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。

0 2026-01-27

React框架制作人物介绍切换特效

React框架制作人物介绍切换特效是一款圆形的虚线旋转和人物介绍标签文字结合，点击按钮切换下一张图片人物介绍效果。

0 2026-01-27

jQuery手机登录注册表单代码

jQuery手机登录注册表单代码是一款基于jQuery+HTML5实现的蓝色风格手机端表单特效。

0 2026-01-27

jquery图片移位效果

jquery图片移位效果是一款基于html5+css3实现的图片随机移位排列效果。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-01-27

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

16241 2025-08-28
CSS3 教程

1546843 2025-08-27
Rust 教程

23375 2025-08-27
Vue 教程

25828 2025-08-22
PostgreSQL 教程

22316 2025-08-21
Git 教程

9286 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中文网。