https://eloquent-khapse-98a9d2.netlify.app/js/bubble/bubble.js

1(function() {
2	var canvas, ctx, width, height, bubbles, animateHeader = true;
3	initHeader();
4	function initHeader() {
5		canvas = document.getElementById('header_canvas');
6		window_resize();
7		ctx = canvas.getContext('2d');
8		//建立泡泡
9		bubbles = [];
10		var num = width * 0.04;//气泡数量
11		for (var i = 0; i < num; i++) {
12			var c = new Bubble();
13			bubbles.push(c);
14		}
15		animate();
16	}
17	function animate() {
18		if (animateHeader) {
19			ctx.clearRect(0, 0, width, height);
20			for (var i in bubbles) {
21				bubbles[i].draw();
22			}
23		}
24		requestAnimationFrame(animate);
25	}
26	function window_resize() {
27		//canvas铺满窗口
28		//width = window.innerWidth;
29		//height = window.innerHeight;
30
31        //如果需要铺满内容可以换下面这个
32        var panel = document.getElementById('thumbnail_canvas');
33		width=panel ? panel.offsetWidth : 0;
34		height=panel ? panel.offsetHeight : 0;
35
36		canvas.width = width;
37		canvas.height = height;
38	}
39    window.onresize = function(){
40        window_resize();
41    }
42	function Bubble() {
43		var _this = this;
44		(function() {
45			_this.pos = {};
46			init();
47		})();
48		function init() {
49			_this.pos.x = Math.random() * width;
50			_this.pos.y = height + Math.random() * 100;
51			_this.alpha = 0.1 + Math.random() * 0.3;//气泡透明度
52			_this.alpha_change = 0.0002 + Math.random() * 0.0005;//气泡透明度变化速度
53			_this.scale = 0.2 + Math.random() * 0.2;//气泡大小
54			_this.scale_change = Math.random() * 0.002;//气泡大小变化速度
55			_this.speed = 0.1 + Math.random() * 1.5;//气泡上升速度
56		}
57		//气泡
58		this.draw = function() {
59			if (_this.alpha <= 0) {
60				init();
61			}
62			_this.pos.y -= _this.speed;
63			_this.alpha -= _this.alpha_change;
64			_this.scale += _this.scale_change;
65			ctx.beginPath();
66			ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
67			ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')';
68			ctx.fill();
69		}; 
70	}
71})();