现在使用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. 分布式事物(同样适用于dubbo事务等分布式事务)

  2. 性能测试监控工具nmon安装及使用方法

    1.概述 监控,在检查系统问题或优化系统性能工作上是一个不可缺少的部分.通过操作系统监控工具监视操作系统资源的使用情况,间接地反映了各服务器程序的运行情况.根据运行结果分析可以帮助我们快速定位系统问题 ...

  3. Go-延时函数defer

    关于延时调用函数(Deferred Function Calls)      延时调用函数基本语法如下: defer func_name(param-list) {} 当一个函数前有关键字 defer ...

  4. JavaScript形而上的For循环中的Break

    break相当于循环中的GOTO,需避免使用. 下面是一个break使用例子. 找出第一个months小于7的项目. const cats = [ { name: 'Mojo', months: 84 ...

  5. _spellmod_aura_pct

    属性光环 为玩家增加光环或降低属性 `aura`光环ID `auraType1` 配置属性('空','生命值','全属性','近战攻击强度','远程攻击强度','法术强度','治疗效果','施法速度' ...

  6. HDU 1041 Computer Transformation(找规律加大数乘)

    主要还是找规律,然后大数相乘 #include<stdio.h> #include<string.h> #include<math.h> #include<t ...

  7. wine安装稳定使用falsh播放器

    1安装wine,wine安装使用网上自行查找 2.安装flash播放器.exe 下载附件的falsh播放相关.tar.gz,解压后得到 Flash.ocx (flash10 for windows的插 ...

  8. Spring Boot 配置加载顺序详解

    使用 Spring Boot 会涉及到各种各样的配置,如开发.测试.线上就至少 3 套配置信息了.Spring Boot 可以轻松的帮助我们使用相同的代码就能使开发.测试.线上环境使用不同的配置. 在 ...

  9. [CQOI2014]数三角形

    [CQOI2014]数三角形 给定\(n\times m\)的网格,求三个点在其格点上的三角形个数,1<=m,n<=1000. 解 法一:直接 显然为组合计数问题,关键在于划分问题,注意到 ...

  10. Kotlin 随笔小计

    最近准备学Kotlin 现在Kotlin也能支持IOS开发了,准备后面买个Mac也能进行IOS开发 当然目标还是看着能不能把一些小的Android项目重构下 也算是定个目标吧,由于沉迷吃鸡,日志都没怎 ...