特效描述：利用HTML5實現 Canvas 流動的 波浪特效。利用HTML5實現Canvas流動的波浪特效

代碼結構

1. 引入JS

2. HTML代碼

'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();

總結

以上是生活随笔為你收集整理的html5 实现波浪效果图,利用HTML5实现Canvas流动的波浪特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。