需求:自动生成若干气泡,从海底往上浮;
1、基本的HTML结构:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin:0; padding:0; } canvas { display:block; } </style> </head> <body> <canvas></canvas> </body> </html>
2、JS代码:
1:创建气泡类Bubble,气泡的大小,上浮的速度,出现的位置,透明度皆随机
创建对象的方法有很多种,这里采用构造函数方法:
var Bubble = function (x, y, radius) { this.x = x; //出现位置的x坐标 this.y = y; //出现位置的y坐标 this.radius = radius; //气泡的大小 this.vy = -Math.random() * 5; //气泡上浮的速度 this.opacity = 0.2 + Math.random() * 0.5; //气泡的透明度 }
添加绘制的方法,我们可以将绘制方法添加到构造函数里,但是这里有一个问题,这个方法会随着这个类复制很多次,造成内存加多,所以这里采用原型的方式来添加绘制的方法:
Bubble.prototype.draw = function(){ // // }
2、接下来开始实现draw的逻辑代码:
Bubble.prototype.draw = function(){ var strokeColor, fillColor; strokeColor = 'rgba(255, 255, 255,' + this.opacity + ')'; /*描边,气泡外围的颜色*/ fillColor = 'rgba(255, 255, 255,' + (this.opacity / 2) + ')'; /*填充,气泡内部的颜色*/ ctx.save(); /*存好当前状态*/ ctx.lineWidth = 0.8; /*画笔粗细*/ ctx.strokeStyle = strokeColor; /*描边*/ ctx.fillStyle = fillColor; /*填充*/ ctx.beginPath(); /*开始绘制*/ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); /*绘制气泡*/ ctx.closePath(); /*关闭路劲*/ ctx.fill(); /*填充路劲*/ ctx.stroke(); /*描边*/ ctx.restore(); /*释放状态*/ }
3、开始生成气泡
function generateBubbles() { for (var i = 0; i <= 50; i++) { bubbles.push(new Bubble(Math.random() * width, height + Math.random() * height / 2, 4 + Math.random() * 2)); } }
4、开始移动气泡:
bubbles.forEach(moveBubble); //forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。 function moveBubble(bubble) { bubble.y += bubble.vy; bubble.draw(ctx); }
5、刷新画布
function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); ctx.fillStyle = '#17293a'; ctx.fillRect(0, 0, width, height); bubbles.forEach(moveBubble); }
6、初始化
init(); function init(){ canvas = document.querySelector('canvas'); ctx = canvas.getContext('2d'); width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; generateBubbles(20); drawFrame(); }
完整代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas深海海藻动画</title> <style> * { margin: 0; padding: 0; } canvas { display: block; } </style> </head> <body> <canvas></canvas> <script> var canvas, ctx, width, height, stems, bubbles; stems = []; bubbles = []; var Bubble = function (x, y, radius) { this.x = x; //出现位置的x坐标 this.y = y; //出现位置的y坐标 this.radius = radius; //气泡的大小 this.vy = -Math.random() * 5; //气泡上浮的速度 this.opacity = 0.2 + Math.random() * 0.5; //气泡的透明度 this.oldY = y; }; Bubble.prototype.draw = function () { var strokeColor, fillColor; strokeColor = 'rgba(255, 255, 255,' + this.opacity + ')'; /*描边,气泡外围的颜色*/ fillColor = 'rgba(255, 255, 255,' + (this.opacity / 2) + ')'; /*填充,气泡内部的颜色*/ ctx.save(); /*存好当前状态*/ ctx.lineWidth = 0.8; /*画笔粗细*/ ctx.strokeStyle = strokeColor; /*描边*/ ctx.fillStyle = fillColor; /*填充*/ ctx.beginPath(); /*开始绘制*/ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); /*绘制气泡*/ ctx.closePath(); /*关闭路劲*/ ctx.fill(); /*填充路劲*/ ctx.stroke(); /*描边*/ ctx.restore(); /*释放状态*/ } init(); function init() { canvas = document.querySelector('canvas'); ctx = canvas.getContext('2d'); width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; generateBubbles(20); drawFrame(); } function generateBubbles(bubblesLimit) { for (var i = 0; i <= bubblesLimit; i++) { bubbles.push(new Bubble(Math.random() * width, height + Math.random() * height / 2, 4 + Math.random() * 2)); } } function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); ctx.fillStyle = '#17293a'; ctx.fillRect(0, 0, width, height); bubbles.forEach(moveBubble); } function moveBubble(bubble) { /*当气上浮至超过页面窗口时,也就是消失的时候,将气泡的位置拉回一开始出现的位置,再次上浮,造成次循环的效果*/ if (bubble.y + bubble.radius <= 0) { bubble.y = bubble.oldY; } bubble.y += bubble.vy; bubble.draw(ctx); } </script> </body> </html>