用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';

});

}