canvas-海底气泡（面向对象编程）
需求：自动生成若干气泡，从海底往上浮；
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();
}
完整代码：
<!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>
canvas-海底气泡（面向对象编程）的更多相关文章
- JAVA的面向对象编程--------课堂笔记
面向对象主要针对面向过程. 面向过程的基本单元是函数. 什么是对象:EVERYTHING IS OBJECT(万物皆对象) 所有的事物都有两个方面: 有什么(属性):用来描述对象. 能够做什么 ...
- JAVA的面向对象编程
JAVA的面向对象编程 面向对象主要针对面向过程. 面向过程的基本单元是函数. 什么是对象:EVERYTHING IS OBJECT(万物皆对象) 全部的事物都有两个方面: 有什么(属性):用来描写叙 ...
- angular2系列教程（六）两种pipe：函数式编程与面向对象编程
今天,我们要讲的是angualr2的pipe这个知识点. 例子
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- PHP 面向对象编程和设计模式 (1/5) - 抽象类、对象接口、instanceof 和契约式编程
PHP高级程序设计 学习笔记 2014.06.09 什么是面向对象编程 面向对象编程(Object Oriented Programming,OOP)是一种计算机编程架构.OOP 的一条基本原则是计算 ...
- Delphi_09_Delphi_Object_Pascal_面向对象编程
今天这里讨论一下Delphi中的面向对象编程,这里不做过多过细的讨论,主要做提纲挈领的描述,帮助自己抓做重点. 本随笔分为两部分: 一.面向对象编程 二.面向对象编程详细描述 ------------ ...
- python基础-面向对象编程
一.三大编程范式 编程范式即编程的方法论,标识一种编程风格 三大编程范式: 1.面向过程编程 2.函数式编程 3.面向对象编程 二.编程进化论 1.编程最开始就是无组织无结构,从简单控制流中按步写指令 ...
- 面向对象编程（OOP）
什么是面向对象编程,对于面向对象编程与面向过程编程的解释随处可见,个人认为对面向对象编程解释最好的一个定义是:依赖倒转原则是面向对象编程的标志,面向对象编程是一种思想,无论使用哪一种编程语言,如果在编 ...
- python 学习笔记7 面向对象编程
一.概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发"更快更好更强..." ...
- 进击的Python【第七章】：Python的高级应用（四）面向对象编程进阶
Python的高级应用(三)面向对象编程进阶 本章学习要点: 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 Socket开发基础 一.面向对象高级语法部分 静态方法 ...
随机推荐
- isdigit函数
isdigit是计算机应用C语言中的一个函数,主要用于检查参数c是否为阿拉伯数字0到9. 相关函数 isdigit 表头文件 #include <ctype.h>(C语言),#includ ...
- Codeforces 810C Do you want a date?(数学，前缀和)
C. Do you want a date? time limit per test:2 seconds memory limit per test:256 megabytes input:stand ...
- hdu_1014(竟然真的还有更水的)
注意输出就没了... #include<cstdio> #include<cstring> using namespace std; int gcd(int a, int b) ...
- python云算法
http://www.runoob.com/python3/python3-basic-operators.html 本章节主要说明Python的运算符.举个简单的例子 4 +5 = 9 . 例子中, ...
- screen乱码问题
在 .screenrc下设置: defencoding gbk encoding gbk gbk detatch+reattach后,设置失效,这时可以直接用命令来配置: ctrl+a :defenc ...
- springcloud干活之服务消费者（feign）
springcloud系列文章的第三篇 本章将继续讲述springcloud的消费者(feign) Spring Cloud Feign是一套基于Netflix Feign实现的声明式服务调用客户端. ...
- sql for xml 输出结果带单引号出现转成&apos的解决方案
select '''' + ID +''',' from 表 for xml path('') 此SQL语句,输出结果如‘1’,’2‘,’3‘, 但是在因xml会出现path转译的问题将‘转成&am ...
- 织梦5.7DEDECMS标签大全
1.关键描述调用标签: 2.路径调用标签: {dede:field name='templeturl'/} {dede:global.cfg_templets_skin/} 3.网站标题调用标签: d ...
- Thinkphp+Nginx(PHPstudy)下报的404错误,403错误解决
最近一个TP5的项目说放到Nginx下测试看看,下载个 PHPstudy,放到WWW下,配置好域名,直接给个报个404: 解决方法: 1.先在phpstudy下配置好域名目录指向项目下的public下 ...
- 访问网站出现 Directory Listing Denied This Virtual Directory
出现这个提示是指没有在您指定的目录找到默认首页,比如您直接输入域名访问空间, 但是出现以上提示,那么请检查目录下是否有 index.htm,index.html,index.asp,default.a ...