您的位置:首页 > Web前端 > JavaScript

JS 实现万花筒特效 JS 原生代码

2017-03-22 19:36 337 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: #190117;
overflow: hidden;
margin: 0;
width: 100%;
}
</style>
</head>
<body>
<script>
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var obj = {
rad: {
base: 200,
vary: 25,
step: Math.PI / 360
},
c: {
w: window.innerWidth,
h: window.innerHeight
},
lay: {
num: 28,
dist: 80,
diff: Math.PI / 66
},
run: {
int: 20
}
};
function Circle(x, y, step) {
this.x = x;
this.y = y;
this.step = step
}
Circle.prototype.draw = function($) {
this.step += obj.rad.step;
$.beginPath();
var r = obj.rad.base + Math.sin(this.step) * obj.rad.vary;
$.arc(this.x, this.y, r, 0, 2 * Math.PI, true);
$.fill();
}
function init() {
var d = obj.lay.dist,
t = Math.PI / 3,
x = obj.c.w / 2,
y = obj.c.h / 2,
clay = [
[new Circle(x, y, 0)]
],
circ, lay, s, pt, ptx, pty, dx, dy;
for (lay = 1; lay < obj.lay.num; lay++) {
circ = [];
for (s = 0; s < 6; s++) {
ptx = x + d * lay * Math.cos(t * s);
pty = y + d * lay * Math.sin(t * s);
dx = d * Math.cos(t * s + t * 2);
dy = d * Math.sin(t * s + t * 2);
for (pt = 0; pt < lay; pt++) {
circ.push(new Circle(ptx + dx * pt, pty + dy * pt, -1 * lay * obj.lay.diff));
}
}
clay.push(circ);
}
return clay;
}
var c = document.createElement('canvas');
c.width = obj.c.w;
c.height = obj.c.h;
document.body.appendChild(c);
var $ = c.getContext('2d');
$.fillRect(0, 0, c.width, c.height);
$.globalCompositeOperation = 'xor';
$.fillStyle = 'hsla(304, 95%, 75%, 1)';
c.addEventListener('load', resize);
c.addEventListener('resize', resize, false);
function resize() {
c.width = w = window.innerWidth;
c.height = h = window.innerHeight;
c.style.position = 'absolute';
c.style.left = (window.innerWidth - w) *
.01 + 'px';
c.style.top = (window.innerHeight - h) *
.01 + 'px';
}
var clay = init();
function run() {
var i, j, ilen, jlen;
$.clearRect(0, 0, obj.c.w, obj.c.h);
for (i = 0, ilen = clay.length; i < ilen; i++) {
for (j = 0, jlen = clay[i].length; j < jlen; j++) {
clay[i][j].draw($);
}
}
}
function go() {
run();
window.requestAnimFrame(go);
}
go();
</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: