利用HTML5實現Canvas流動的波浪特效



11 42 15



特效描述:利用HTML5實現 Canvas 流動的 波浪特效,利用HTML5實現Canvas流動的波浪特效

代碼結構

1. 引入JS

<script src="js/simplex-noise.min.js"></script>
<script src="js/dat.gui.min.js"></script>

2. HTML代碼

<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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 切換按鈕 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 表單 表單美化 表單插件 表單美化插件 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 h5按鈕動畫 html5按鈕動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 迷宫之主赚钱吗 股票配资论坛x贝得来 六合图库彩图跑狗图超清 新快3和老快3区别 加盟十足赚钱吗 地下城勇士单机破解版 车辆保险怎么赚钱 516金蟾捕鱼下载官 手机麻将作弊管用吗 篮球队门票赚钱 南粤风采36选7预测最准确 微信小程序小游戏赚钱 香港六合彩结果 老虎机怎么调难度图解 宁夏十一选五开奖查询 二人麻将