js实现可爱的气泡特效


Posted in Javascript onSeptember 05, 2020

本文实例为大家分享了js实现可爱的气泡特效的具体代码,供大家参考,具体内容如下

js实现可爱的气泡特效

代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="myCanvas"></canvas>
  <script>
    var c = document.getElementById("myCanvas");
    c.width = 300;
    c.height = 500;
    var ctx = c.getContext('2d');

    var arr = []

    function sui() {
      var r = Math.floor(Math.random() * 6 + 5);
      var x = Math.floor(Math.random() * (c.width - 2 * r)) + r;
      var y = c.height - r;
      var opacity = Math.random();
      var red = Math.floor(Math.random() * 256);
      var green = Math.floor(Math.random() * 256);
      var blue = Math.floor(Math.random() * 256);
      var deg = 0;
      var scale = Math.floor(Math.random() * 6 + 10);
      arr.push({
        x,
        y,
        r,
        red,
        green,
        blue,
        opacity,
        deg,
        scale
      })
    }
    setInterval(sui, 40);
    // 再实现变大和绘制
    function dan() {
      ctx.clearRect(0, 0, c.width, c.height);
      arr.forEach((item, i) => {
        item.deg += 0.5;
        item.y -= item.deg;
        item.x += Math.sin(item.deg) * item.scale;
        if (item.y <= item.r) {
          arr.splice(i, 1);
        } else {
          ctx.beginPath();
          ctx.arc(item.x, item.y, item.r, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(${item.red},${item.green},${item.blue},${item.opacity})`;
          ctx.fill();
        }
      })
    }
    setInterval(dan, 100);
  </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 #Javascript
javascript实现一款好看的秒表计时器
Sep 05 #Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 #Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 #Javascript
Vue中component标签解决项目组件化操作
Sep 04 #Javascript
JS数组转字符串实现方法解析
Sep 04 #Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 #Javascript
You might like
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php通过各种函数判断0和空
2020/07/04 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
微信小程序倒计时功能实现代码
2017/11/09 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
浅析Python的Django框架中的Memcached
2015/07/23 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python列表与元组的异同详解
2019/07/02 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
历史教育专业个人求职信
2013/12/13 职场文书
房屋租赁协议书
2014/10/18 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
公司出差管理制度范本
2015/08/05 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书