html5 canvas彩色波浪起伏动画特效免费下载

挺好看的一款html5 canvas彩色波浪起伏动画特效,可以在右上角自定义设置参数实现不同的波浪起伏效果。

JS代码

<script src="js/simplex-noise.min.js"></script> 
<script src="js/dat.gui.min.js"></script> 
 
<canvas></canvas> 
 
<script> 
'use strict'; 
 
var gui = new dat.GUI(), 
    guiSet = { 
    frequency: 10, 
    reset: function reset() { 
        $.reset(); 
    } 
}; 
gui.add(guiSet, 'frequency').min(10).max(50); 
gui.add(guiSet, 'reset'); 
 
// 
 
var $ = {}; 
 
/*======================================== 
Utility 
========================================*/ 
 
$.PI = Math.PI; 
$.TAU = $.PI * 2; 
 
$.rand = function (min, max) { 
    if (!max) { 
        var max = min; 
        min = 0; 
    } 
 
    return Math.random() * (max - min) + min; 
}; 
 
/*======================================== 
Initialize 
========================================*/ 
 
$.init = function () { 
    $.c = document.querySelector('canvas'); 
    $.ctx = $.c.getContext('2d'); 
    $.simplex = new SimplexNoise(); 
    $.events(); 
    $.reset(); 
    $.loop(); 
}; 
 
/*======================================== 
Reset 
========================================*/ 
 
$.reset = function () { 
    $.w = window.innerWidth; 
    $.h = window.innerHeight; 
    $.cx = $.w / 2; 
    $.cy = $.h / 2; 
    $.c.width = $.w; 
    $.c.height = $.h; 
 
    $.count = Math.floor($.w / guiSet.frequency); // Wave frequency 
    $.xoff = 0; 
    $.xinc = 0.05; 
    $.yoff = 0; 
    $.yinc = 0.01; // Speed 
    $.goff = 0; 
    $.ginc = 0; 
    $.y = $.h * 0.65; 
    $.length = $.w + 0; 
    $.amp = 15; // Wave height 
}; 
 
/*======================================== 
Event 
========================================*/ 
 
$.events = function () { 
    window.addEventListener('resize', $.reset.bind(undefined)); 
}; 
 
/*======================================== 
Wave 
========================================*/ 
 
$.wave = function (color, amp, height, comp) { 
    $.ctx.beginPath(); 
    var sway = $.simplex.noise2D($.goff, 0) * amp; 
 
    for (var i = 0; i <= $.count; i++) { 
        $.xoff += $.xinc; 
        var x = $.cx - $.length / 2 + $.length / $.count * i; 
        var y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway; 
        $.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y); 
    } 
 
    $.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection 
    $.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection 
    $.ctx.closePath(); 
    $.ctx.fillStyle = color; 
 
    if (comp) { 
        $.ctx.globalCompositeOperation = comp; 
    } 
 
    $.ctx.fill(); 
}; 
 
/*======================================== 
Loop 
========================================*/ 
 
$.loop = function () { 
    requestAnimationFrame($.loop); 
 
    $.ctx.clearRect(0, 0, $.w, $.h); 
    $.xoff = 0; 
 
    $.ctx.fillStyle = "#182645"; 
    $.ctx.fillRect(0, 0, $.w, $.h); 
 
    $.wave("#fb0000", 20, $.h * .5, "screen"); 
    $.wave("#00ff8e", 20, $.h * .5, "screen"); 
    $.wave("#6F33FF", 20, $.h * .5, "screen"); 
 
    $.ctx.fillStyle = "#f1dfdd"; 
 
    $.ctx.globalCompositeOperation = "darken"; 
 
    $.ctx.fillRect(0, 0, $.w, $.h); 
 
    $.yoff += $.yinc; 
    $.goff += $.ginc; 
}; 
 
/*======================================== 
Start 
========================================*/ 
 
$.init();</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录