现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码。

先来一张效果图:

现在上代码,代码有详细的注释,简单易懂:

<!--html只有一个canvas标签-->
<canvas id="canvas"></canvas>
//获取canvas标签
var canvas = document.getElementById("canvas");
//定义画布的高和宽,定义为屏幕的高宽
canvas.width = document.documentElement.clientWidth-20;
canvas.height = document.documentElement.clientHeight-20;
//获取2d画布
var ctx = canvas.getContext("2d");
//定义存放气泡的数组
var bubbleArr = []; //定义气泡的对象
function Bubble(x,y,r,dx,dy){
this.x = x;//气泡的x坐标
this.y = y;//气泡的y坐标
this.r = r;//气泡的半径
this.dx = dx;//气泡运动的x偏移量
this.dy = dy;//气泡运动的y偏移量
bubbleArr.push(this);//将对象放入气泡数组
} Bubble.prototype.move = function(){
this.x += this.dx;//气泡x偏移量
this.y += this.dy;//气泡y偏移量
this.r--;//气泡半径减小
} Bubble.prototype.go = function(){
//气泡的颜色,随机生成
ctx.fillStyle = "rgba("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+",0.7)";
//开始画气泡
ctx.beginPath();
//画圆 参数依次为:圆心x坐标、圆心y坐标、半径、弧度开始位置、弧度结束位置、是否顺时针
ctx.arc(this.x,this.y,this.r,0,2*Math.PI,true);
//填充
ctx.fill();
} //定义鼠标移动事件
document.onmousemove = function(ev){
//获取当前的dom,兼容ie
var e = ev || window.event;
//实例化对象,半径在100以内随机生成,偏移量在-20~20之间随机生成
new Bubble(e.clientX,e.clientY,Math.floor(Math.random()*100),Math.floor(Math.random()*20)-Math.floor(Math.random()*20),Math.floor(Math.random()*20)-Math.floor(Math.random()*20));
}

//定时器,一秒执行50次,每次都会改变气泡的半径和偏移量
setInterval(function(){
//现将画布清屏
ctx.clearRect(0,0,canvas.width,canvas.height);
//循环气泡数组,存在并且半径大于0,则生成气泡
for(var i = 0;i < bubbleArr.length;i++){
bubbleArr[i].move();
if(bubbleArr[i].r<0){
//半径小于0,将对象从数组清除
bubbleArr.splice(i,1);
}else{
bubbleArr[i].go();
}
}
},20);

相信都能看得懂,代码也可以复制到html里直接运行,很简单的逻辑,代码也简单,如有兴趣可点击下方链接看看效果,鼠标在页面移动即可。

canvas绘制炫彩气泡展示链接:http://yktzs.top/canvas/bubble.html 。

如有错误,欢迎指正QQ:1505771465

java-js知识库之二——canvas绘制炫彩气泡的更多相关文章

  1. java-js知识库之一——canvas绘制9*9乘法表

    不知不觉一年又要过去了,软件这一行入坑快两年了,一直不知道这两年干了些啥,也不知道自己到底会些什么,工作也是些简单的东西,谁都能做,对未来也是很茫然.今天和同事优化数据库,头都是懵的,很多东西都感觉似 ...

  2. [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

    综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...

  3. canvas基础入门(二)绘制线条、三角形、七巧板

    复杂的内容都是有简单的线条结合而成的,想要绘制出复杂好看的内容先从画直线开始 canvas绘制直线先认识几个函数 beginPath():开始一条路径,或重置当前的路径 moveTo(x,y):用于规 ...

  4. 一次js自定义播放器,canvas绘制弹幕的尝试

    不多bb,就直接说实现了什么功能: 1. 视频播放进度调整 2. 视频小窗口实时预览 3. 声音调整 4. 画中画模式 5. 网页全屏 6. 视频全屏 7. canvas绘制弹幕 8. 选中弹幕悬停 ...

  5. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  6. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  7. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  8. HTML5—canvas绘制图形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  9. 超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

随机推荐

  1. windows下安装git和vundle

    git在windows下的版本是: git-for-windows, 或者说是: msysgit: ms-sys-git 直接在 https://gitforwindows.org/上下载 git对w ...

  2. 51nod1363 最小公倍数之和

    题目描述 给出一个n,求1-n这n个数,同n的最小公倍数的和. 例如:n = 6,1,2,3,4,5,6 同6的最小公倍数分别为6,6,6,12,30,6,加在一起 = 66. 由于结果很大,输出Mo ...

  3. 15_Raid及mdadm命令 _LVM

    磁盘管理:     机械式硬盘:     U盘,光盘,软盘,硬件,磁带 ln [ -s -v ] SRC DEST 硬链接:     1.只能对文件创建,不能应用于目录     2.不能跨文件系统   ...

  4. sublime Text 常用插件

    1.LocalizedMenu 语言插件 2.SublimeRPEL   这个我主要是用python,设置快捷键后很方便 3.以后用到什么再补充

  5. BeanUtils的copyproPerties方法的用法

    转自:Hassan Blog的博客 一.简介:  BeanUtils提供对Java反射和自省API的包装.其主要目的是利用反射机制对JavaBean的属性进行处理.我们知道,一个JavaBean通常包 ...

  6. Java——ping & telnet实现

    ping & telnet 实现类: import org.springframework.data.web.JsonPath; import java.io.IOException; imp ...

  7. Hadoop之运行环境搭建

    一.虚拟机环境准备 1.克隆虚拟机 2.修改克隆虚拟机静态IP 3.修改主机名 4.关闭防火墙 5.创建hadoop用户 6.配置hadoop用户具有root权限 7.在/opt 目录下创建文件夹 1 ...

  8. java笔记 -- java字符串

    概念: Java字符串就是Unicode字符序列, Java没有内置的字符串类型, 而是在标准Java类库中提供了一个预定义类. 每个用双引号括起来的字符串都是String类的一个实例.String ...

  9. HTTP请求头和响应头部包括的信息有哪些?(转)

    转载自:https://www.cnblogs.com/hxc555/p/6506154.html 每个HTTP请求和响应都会带有相应的头部信息.默认情况下,在发送XHR请求的同时,还会发送下列头部信 ...

  10. 多重线性回归 (multiple linear regression) | 变量选择 | 最佳模型 | 基本假设的诊断方法

    P133,这是第二次作业,考察多重线性回归.这个youtube频道真是精品,用R做统计.这里是R代码的总结. 连续变量和类别型变量总要分开讨论: 多重线性回归可以写成矩阵形式的一元一次回归:相当于把多 ...