用html做龙卷风特效,HTML5/Canvas 彩色龙卷风
JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var c = document.getElementById(“canv”);
c.width = window.innerWidth;
c.height = window.innerHeight;
var $ = c.getContext(‘2d’);
run();
function run() {
window.requestAnimFrame(run);
draw();
};
var dx = 0,
dy = 0;
var circles = [];
var cols = [‘hsla(169, 95%, 25%, 1)’,
‘hsla(109, 95%, 35%, 1)’,
‘hsla(59, 95%, 55%, 1)’,
‘hsla(34, 95%, 45%, 1)’
];
for (var i = 0; i <= 90; i++) {
var circle = {
t: Math.random() * 360,
dt: Math.random() * .2,
s: Math.random() * 10,
r: Math.ceil(Math.random() * 300),
dr: Math.ceil(Math.random() * 6),
c: cols[Math.floor(Math.random() * cols.length)]
};
circles.push(circle);
}
function draw() {
c.width = c.width;
for (var i in circles) {
var circle = circles[i];
circle.t += circle.dt;
circle.t %= 360;
dx = Math.sin(circle.t) * circle.s;
dy = Math.cos(circle.t) * circle.s;
$.globalAlpha = .6;
$.strokeStyle = circle.c;
$.beginPath();
for (var j = 0; j <= circle.dr; j++)
$.arc(c.width / 2 + dx, c.height / 2 + dy, circle.r + j, 0, 2 * Math.PI);
$.closePath();
$.stroke();
}
window.addEventListener(‘resize’, function() {
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’;
});
}
刺骨的言语ヽ痛彻心扉
妖狐艹你老母
系统管理员
╰+哭是因爲堅強的太久メ
还没有评论，来说两句吧...