canvas动画:气泡上升效果
HTML5中的canvas真是个很强大的东西呢!
这几天突发奇想想做一个气泡上升的动画,经过许久的思考和多次失败,终于做出了如下效果
由于是录制的gif图,看着会有点卡顿,实际演示是很自然的
想要做出这种效果需要用到大量的随机数
先上代码:
CSS+HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#canvas1{
display: block;
position: absolute;
bottom: 0;
transition: all 0.2s ease;
}
</style>
</head>
<body>
<canvas id="canvas1">您的浏览器不支持canvas</canvas>
<script src="qipao.js"></script>
</body>
</html>
JS
let canvas1 = document.getElementById('canvas1');
let context1 = canvas1.getContext('2d');
let canvasH = 300; function resizeCanvas() {
if (window.innerHeight > 1920) {
canvas1.width = window.innerWidth;
}
else {
canvas1.width = 1920;
}
canvas1.height = canvasH;
}//设置canvas宽高 resizeCanvas(canvas1); let num = 100;//气泡数量
let ballX = [];//球心的横坐标
let ballY = [];//球心的纵坐标
let ballR = [];//球的半径
let ballF = [];//小球左右摆动幅度
let speed = [];//小球向上移动速度
let colours = ["rgb(91,155,213)","rgb(180,199,231)","rgb(0,0,255)","rgb(46,177,182)","rgb(68,114,196)"];//小球颜色
let finalCol=[]; //在随机位置产生num个随机半径的球,储存变量
for(let i = 0;i < num; i++) {
let radius = Math.floor(Math.random() * 15 + 10);
let x = Math.floor(Math.random() * canvas1.offsetWidth);
let y = Math.floor(Math.random() * 300);
let fudu = Math.floor(Math.random() * 10 + 5);
let sp = Math.floor(Math.random() * 30 + 5);
let color = colours[Math.floor(Math.random() * colours.length)];
ballX.push(x);
ballY.push(y);
ballR.push(radius);
ballF.push(fudu);
speed.push(sp);
finalCol.push(color);
} let reX;
let reY;
let ballK=[]; //使小球移动(向上做曲线运动)
function move(){
context1.clearRect(0, 0, canvas1.offsetWidth, 300);
for(let i = 0;i < num; i++) {
(function (i) {
if(ballK[i] == null){
ballK[i] = 0;
}
reX = ballK[i] * speed[i] + ballY[i];
reY = Math.sin(ballK[i]) * ballF[i] + ballX[i];
if(reX + ballR[i] <= 0){
ballY[i] = 320;
ballK[i] = 0;
reX = ballK[i] * speed[i] + ballY[i];
}
context1.beginPath();
context1.fillStyle = finalCol[i];
context1.globalAlpha = 0.5;
context1.arc(reY, reX, ballR[i], 0, Math.PI * 2);
context1.fill();
ballK.splice(i,1,ballK[i]);
ballK[i]-=0.1;
})(i);
}
}
setInterval(move,20);//定时器
整体思路:
首先定义几个数组,一个是装横坐标,一个装纵坐标,一个装半径,一个装圆的颜色
绘制若干个圆,圆心的横坐标、纵坐标、半径全部采用随机数的形式得到
用fill()方法填充圆,fillStyle()方法指定颜色,颜色也全部用随机数得到
用golbalAlpha设置透明度
这样每个圆都有了自己的初始位置,颜色,和透明度
然后开始绘制每个球的运动路线
绘制路线这里我用了sin函数,通过该变角度,振幅等来改变路线,因此又要定义两个数组,一个装振幅,另外一个装圆移动的速度,这两个变量也用随机数的形式得到
因为sin函数的轨迹总体是水平方向上的运动,因此如果想实现从下往上,就要把横坐标与纵坐标颠倒过来
当圆从下往上运动时,如果圆已经移出了canvas的范围也就是圆心的纵坐标-半径<=0,那么改变圆的坐标,这样就可以循环从下往上运动了
设置定时器,每过20毫秒,使用clearRect清除先前的圆的位置,并在新的位置上绘制圆
说了这么多,个人认为这个动画的核心是储存变量。
canvas动画:气泡上升效果的更多相关文章
- [js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...
- canvas动画简单操作
canvas动画 小球滚动效果 关键api: window.requestAnimationFrame(draw) 会递归调用draw函数,替代setInterval var x = 20; var ...
- 基于canvas实现物理运动效果与动画效果(一)
一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示
- HTML5 Canvas动画效果实现原理
在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- 酷!使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
随机推荐
- flume本地调试
本机idea远程调试flume:https://blog.csdn.net/u012373815/article/details/60601118 遇到 [root@hadoop02 bin]# ./ ...
- C#try catch块
try..catch块的出现是为了异常处理. 格式为:try{...可能发生异常的代码...} catch{...对异常的处理...} finaly{...无论如何都会执行的代码..} 上面的只是一般 ...
- scons编译mongodb(vs2008版本)遇到的问题总结
OS:win7 64 boost:1.49 mongodb:2.4.6(推荐64位版本,当然如果你系统是32位的,只能使用32的版本了) IDE:vs2008(2010的同学请跳过吧,因为官网提供的就 ...
- ssh超时时间设置(设置ClientAliveInterval),附SSH超详细参数
作者: daodaoliang 版本: V 0.0.1 日期: 2016年12月29日 0x00 OpenSSH 简介 OpenSSH是采用SSH协议实现的重要的远程连接工具,它对所有的数据进行加密以 ...
- 模拟键盘发送文字(使用SendInput API函数)
嗯...老生常谈的话题, 不过系统的总结了一下, 找了个相对简单的实现方式, 可以方便的发送任何文字 参考另一片文章: http://www.cnblogs.com/-clq/archive/2011 ...
- Android native进程间通信实例-binder篇之——简单的单工通信
网上找了很多binder相关文章,大部分都是在跟踪binder实现源代码,然后再把框架代码贴出来,看着实在费力. 这篇文章从实际出发,直接用一个案例下手,后续想了解binder相关原理的话,可以参考& ...
- rm、shutdown、磁盘挂载、vi使用方法
1. 系统管理文件 1.1 rm 文件与目录有关命令 删除命令 (慎用) --- 数据是否备份了 rm === remove rm /oldboy/oldboy.txt --- 删除文件 rm ...
- MySQL的登录与退出以及MySQL的目录结构
一.MySQL的登录 1.利用语句mysql -uroot -proot 同时如果密码不想让别人看到,可以在-p处直接回车,再输入密码就是加密的了 2.远程登录 以连接本地为例 此处涉及到localh ...
- Linux下docker的安装
前言: 因为之前在自己的mac上直接使用HomeBrew的包管理安装的,使用brew install docker即可,这种方法简单,但最近想尝试在Linux下安装,费了一些时间,主要是启动docke ...
- ELK架构下利用Kafka Group实现Logstash的高可用
系统运维的过程中,每一个细节都值得我们关注 下图为我们的基本日志处理架构 所有日志由Rsyslog或者Filebeat收集,然后传输给Kafka,Logstash作为Consumer消费Kafka里边 ...