需求：自动生成若干气泡，从海底往上浮；

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-海底气泡（面向对象编程）的更多相关文章

  1. JAVA的面向对象编程--------课堂笔记

    面向对象主要针对面向过程. 面向过程的基本单元是函数.   什么是对象:EVERYTHING IS OBJECT(万物皆对象)   所有的事物都有两个方面: 有什么(属性):用来描述对象. 能够做什么 ...

  2. JAVA的面向对象编程

    JAVA的面向对象编程 面向对象主要针对面向过程. 面向过程的基本单元是函数. 什么是对象:EVERYTHING IS OBJECT(万物皆对象) 全部的事物都有两个方面: 有什么(属性):用来描写叙 ...

  3. angular2系列教程（六）两种pipe：函数式编程与面向对象编程

    今天,我们要讲的是angualr2的pipe这个知识点. 例子

  4. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  5. PHP 面向对象编程和设计模式 (1/5) - 抽象类、对象接口、instanceof 和契约式编程

    PHP高级程序设计 学习笔记 2014.06.09 什么是面向对象编程 面向对象编程(Object Oriented Programming,OOP)是一种计算机编程架构.OOP 的一条基本原则是计算 ...

  6. Delphi_09_Delphi_Object_Pascal_面向对象编程

    今天这里讨论一下Delphi中的面向对象编程,这里不做过多过细的讨论,主要做提纲挈领的描述,帮助自己抓做重点. 本随笔分为两部分: 一.面向对象编程 二.面向对象编程详细描述 ------------ ...

  7. python基础-面向对象编程

    一.三大编程范式 编程范式即编程的方法论,标识一种编程风格 三大编程范式: 1.面向过程编程 2.函数式编程 3.面向对象编程 二.编程进化论 1.编程最开始就是无组织无结构,从简单控制流中按步写指令 ...

  8. 面向对象编程（OOP）

    什么是面向对象编程,对于面向对象编程与面向过程编程的解释随处可见,个人认为对面向对象编程解释最好的一个定义是:依赖倒转原则是面向对象编程的标志,面向对象编程是一种思想,无论使用哪一种编程语言,如果在编 ...

  9. python 学习笔记7 面向对象编程

    一.概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发"更快更好更强..." ...

  10. 进击的Python【第七章】：Python的高级应用（四）面向对象编程进阶

    Python的高级应用(三)面向对象编程进阶 本章学习要点: 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 Socket开发基础 一.面向对象高级语法部分 静态方法 ...

随机推荐

  1. 基于Windows下处理Java错误:编码GBK的不可映射字符的解决方案

    基于Windows下处理Java错误:编码GBK的不可映射字符的解决方案 最近在研究Java,涉及命令行编译,使用notepad++编辑器,然后使用javac编译: 之前的几个文件没有中文的内容,都没 ...

  2. BZOJ1786: [Ahoi2008]Pair 配对/1831: [AHOI2008]逆序对

    这两道题是一样的. 可以发现,-1变成的数是单调不降. 记录下原有的逆序对个数. 预处理出每个点取每个值所产生的逆序对个数,然后dp转移. #include<cstring> #inclu ...

  3. POJ_1064 二分搜索

    /*POJ 1064 *题目大意:有N条绳子,他们的长度分别为Li,如果从他们中切割K条长度相同的绳子的话,这K条绳子每条最长能有多长?答案保留到小数点后2位 *算法分析:这个问题用二分搜索可以非常容 ...

  4. ACM_并查集

    //题意:ignatius过生日,客人来到,他想知道他需要准备多少张桌子.然而一张桌子上面只能坐上相互熟悉的人, //其中熟悉可定义成为A与B认识,B与C认识,我们就说A,B,C相互熟悉 .例如A与B ...

  5. Shell菜单脚本

    今天在这儿给大家分享一个我简单编写的Shell菜单脚本,傻瓜式的人机交互,人人都可以操作linux. #!/bin/sh #Shell菜单演示 function menu () { cat <& ...

  6. linux下各文件夹的结构说明及用途介绍

    linux下各文件夹的结构说明及用途介绍: /bin:二进制可执行命令.   /dev:设备特殊文件.   /etc:系统管理和配置文件.   /etc/rc.d:启动的配 置文件和脚本.   /ho ...

  7. CentOS 6.5 编译安装 LNMP环境

    建立一个软件包目录存放 mkdir -p /usr/local/src/ 清理已经安装包 rpm -e httpd rpm -e mysql rpm -e php yum -y remove http ...

  8. Scrum已经俘获中国开发者的心? ——从《2017年开发者调查报告》看真相！

    云栖社区通过为期两个月,对7032份有效调查问卷分析统计,2017年12月发布了首份<2017中国开发者调查报告>.报告显示,37.3%的开发者表示,协作工具主要来自企业内部自研的协作工具 ...

  9. Git 忽略提交 .gitignore

    在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交. Git 忽略文件提交的方法 有三种方法可以实现忽略Gi ...

  10. python来写打飞机

    准备用python写一个打飞机的游戏,相信能够写完这个项目,我对python的学习应该也算可以了. 首先,我们要使用python的一个pygame的库来写,这个库的安装比较简单就是普通的pip安装就可 ...