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中利用数组实现的循环队列代码
Jan 24 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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
php adodb操作mysql数据库
2009/03/19 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python中的列表知识点汇总
2015/04/14 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python开启debug模式的方法
2019/06/27 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
pycharm快捷键汇总
2020/02/14 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
培训演讲稿范文
2014/01/12 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
个人自荐材料
2014/05/23 职场文书
三年级学生评语大全
2014/12/26 职场文书
新学期主题班会
2015/08/17 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python