梦幻的海底世界有木有!
好好,这个不是一个很难的demo,
但思路...">

评论走起

canvas-海底气泡圈圈(画布基础思路)-js

梦幻的海底世界有木有!
好好,这个不是一个很难的demo,
但思路却很清晰,对后期个人写canvas的一些小动画啊,小效果帮助很大。
先上成果!!!!!!!!!!!里面有详细的中文注释
html 代码

接下来是实现过程了,

一、首先要有的sources

海底背景图,我同的大鱼海棠的海底海报

声音,海底的气泡吐气声mp3
[audio]http://www.tofei.cc/comments/22_sea/96742__robinhood76__01650-underwater-bubbles.mp3[/audio]

二、html结构

需求分析设计结构:
漂浮的文字、canvas画布两个结构块,用一个section,把h3(文字),canvas装下;
文字的每个字母都是单独移动的,用span把每个字母分开(后期添加css3动画);
音乐,进入后播放,放在section外面好了。
为了有海底的感觉,给section添加了背景图片,大鱼海棠的海报。

html 代码

三、浮动的文字css3动画

需求分析设计动画:
基数和偶数的字母浮动的幅度和时间有差,都是上下浮动稍微旋转一下下。动画0%-50%缓慢地出去,50%-100%缓慢地进。

css 代码

四、鼠标监听开始画圈圈啦####
1、初始化canvas画布。准备妥当所有的全局参数,设置浏览器窗口大小改变时重绘canvas画布,保持与浏览窗口一样大小。
javascript 代码

2、要知道怎么用canvas画一个圆(canvas方法集合)
javascript 代码

3、鼠标经过的位置要产生气泡,所以要监听鼠标移动,记录鼠标位置
javascript 代码

4、接下来是核心啦,包括怎么记录、怎么循环、圆的位置的移动。
requestAnimationFrame循环调用loop函数,
loop方法分别调用update方法更新记录圆的位置和决定是否调用createCircle方法来在鼠标所在的位置添加一个圆,并加入队列。,render方法根据circleArr(圆队列)重新绘制canvas,
javascript 代码

5、开始和结束的控制,给个开始和结束的控制,在后期扩展时会很方便
javascript 代码

最后!!!
执行初始化和开始方法
javascript 代码

优化思考
1.或许气泡的形状可以研究一下,更形象一点。
2.可以考虑适配移动端.


评论
  • 3天前
    不错
    0 回复