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动画：气泡上升效果的更多相关文章

  1. [js高手之路]html5 canvas动画教程 - 下雪效果

    利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...

  2. canvas动画简单操作

    canvas动画 小球滚动效果 关键api: window.requestAnimationFrame(draw) 会递归调用draw函数,替代setInterval var x = 20; var ...

  3. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  4. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  5. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  6. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  7. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  8. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  9. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  10. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

随机推荐

  1. SQL 时间格式化函数发布

    SQL 时间格式化函数,有时候因某种需要需要格式化成需要的时间格式,需要的朋友可以收藏下,以备后用. SQL Server里面可能经常会用到的日期格式转换方法: sql server使用convert ...

  2. git + gerrit push 代码问题

    关于refs/for 和 refs/heads: 1.     这个不是git的规则,而是gerrit的规则, 2.     Branches, remote-tracking branches, a ...

  3. 中国目前的房地产总市值占GDP的比例为411%，远远高于世界平均水平的260%

    到2015年统计,一线城市空置率22%,二线城市24%.中央开始喊要供应侧改革了. 中国目前的房地产总市值占GDP的比例为411%,远远高于世界平均水平的260%.无疑已经蕴含着比较明显的泡沫. 那么 ...

  4. MQTT-CN MQTT协议中文版

    欢迎任何形式的转载,但请务必注明出处:http://www.cnblogs.com/liangjingyang 项目地址:https://github.com/liangjingyang/MQTT-C ...

  5. 网易Lofter

    作为老网虫,对网易的感情是很深的.当我知道Lofter这个东西后,曾经很兴奋要好好打理自己的博客,然而兴奋很快过了.因为Lofter无时无刻不在刷存在感.无限空间加无限图片流量,国内的服务无法做的更好 ...

  6. C#实现任意源组播与特定源组播

    IP组播通信需要一个特殊的组播地址,IP组播地址是一组D类IP地址,范围从224.0.0.0 到 239.255.255.255.其中还有很多地址是为特殊的目的保留的.224.0.0.0到224.0. ...

  7. spring3升级到spring4通用异常处理返回jsonp多了/**/的解决办法

    问题描述 在spring3中定义了通用的异常处理,具体代码如下: public class CommonExceptionHandler implements HandlerExceptionReso ...

  8. Appium+python自动化（十二）- Android UIAutomator终极定位凶“胸”器(七)（超详解）

    简介 乍眼一看,小伙伴们觉得这部分其实在异性兄弟那里就做过介绍和分享了,其实不然,上次介绍和分享的大哥是uiautomatorviewer,是一款定位工具.今天介绍的是一个java库,提供执行自动化测 ...

  9. Rxjs中Notification 介绍

    timer(0, 1000) // 计时器,每1000ms发射一个值,初始发射值延迟时间为0s: .pipe( take(5), // 取前5个值 takeWhile(value => valu ...

  10. 【HDU - 1495】非常可乐

    -->非常可乐  Descriptions: 大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一 ...