Canvas波浪线动画特效

Html

Css

* {
	overflow:hidden;
	margin:0;
	width:100%;
	height:100%;
}
.c {
	background:black;
}

var c = document.querySelector('.c') /* canvas element */ ,
    w /* canvas width */ , h /* canvas height */ ,
    ctx = c.getContext('2d') /* canvas context */ ,

/* previous & current coordinates */
    x0, y0, x, y,
    t = 0,
    t_step = 1 / 10,
    tmp,

/* just me being lazy */
    exp = Math.exp,
    pow = Math.pow,
    sqrt = Math.sqrt,
    PI = Math.PI,
    sin = Math.sin,
    cos = Math.cos;

/* FUNCTIONS */
/* a random number between min & max */
var rand = function(max, min) {
    var b = (max === 0 || max) ? max : 1,
        a = min || 0;

return a + (b - a) * Math.random();
};

var trimUnit = function(input_str, unit) {
    return parseInt(input_str.split(unit)[0], 10);
};

var initCanvas = function() {
    var s = getComputedStyle(c);

w = c.width = trimUnit(s.width, 'px');
    h = c.height = trimUnit(s.height, 'px');
};

var wave = function() {
    x0 = -1, y0 = h / 1;

ctx.clearRect(0, 0, w, h);

tmp = pow(t, 1.75) / 10; /* keep computation out of loop */

for (x = 0; x < w; x = x + 3) {
        y = 9 * sqrt(x) * sin(x / 45 / PI + t / 3 + sin(x / 29 + t)) +
            32 * sin(t) * cos(x / 19 + t / 7) +
            16 * cos(t) * sin(sqrt(x) + rand(3, 2) * tmp) + h / 2;

ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.lineTo(x, y);
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'hsl(' + (2 * x / w + t) * 180 + ', 100%, 65%)';
        ctx.stroke();

x0 = x;
        y0 = y;
    }

t += t_step;

requestAnimationFrame(wave);
};

/* START THE MADNESS */
setTimeout(function() {
    initCanvas();
    wave();

/* fix looks on resize */
    addEventListener('resize', initCanvas, false);
}, 15);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

Canvas波浪线动画特效



代码描述：HTML5 Canvas炫酷彩虹色波浪线动画特效

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

smile

相关代码

Canvas波浪线动画特效

最新