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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS+CSS实现一个气泡提示框

    JS+CSS实现一个气泡提示框

    分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件:(2)纯CSS制作三角形. 效果这样:  这是html: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>气泡对话框</title> <script src="myBubbleTooltip.js"></script>

  • 使用JS实现气泡跟随鼠标移动的动画效果

    使用JS实现气泡跟随鼠标移动的动画效果

    气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 简单的气泡效果 </title> <style type="text

  • JavaScript实现鼠标滑过处生成气泡的方法

    本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>鼠标周围在网页上生成气泡</title> </HEAD> <BODY bgColor=#000000 scroll=no onload=zyva()> <div id=aqua style="position:absolute;left=0;top=0;">

  • D3.js实现散点图和气泡图的方法详解

    D3.js实现散点图和气泡图的方法详解

    前言 小编之前已经跟大家分享过了<D3.js实现柱状图的方法详解>和<D3.js实现折线图的方法详解>这两篇文章,已经介绍过柱状图和折线图了.下面就来说说和这两种非常相似的图表--散点图和气泡图.有需要的朋友们可以参考学习. 散点图和气泡图的实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

  • JavaScript实现好看的跟随彩色气泡效果

    JavaScript实现好看的跟随彩色气泡效果

    本文实例为大家分享了js实现跟随彩色气泡的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin:0;padding:0; } body{overflow:hidden;} #canvas{ background-color:black;

  • 纯JS代码实现气泡效果

    就不给大家多文字说明了.给大家梳理下关键步骤. 关键步骤: 1.引入js文件 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src='js/jquery.thoughtBubble.js'></script> 2.在需要使用气泡效果的地方 <div i

  • jquery.cvtooltip.js 基于jquery的气泡提示插件

    序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

  • Jquery插件分享之气泡形提示控件grumble.js

    Jquery插件分享之气泡形提示控件grumble.js

      任何一个grumble都可以放到它所围绕元素的任意角度的位置,360度全方位无死角,无残留.还能指定任意距离,应用任意CSS样式. 对于任意文本还可以自动调整大小. 多个grumble可以通过FX队列实现动画效果. 最后,它能在IE6+这些古董浏览器上工作,更不用FF.Chrome这些现代的浏览器了!grumble.js 其实是一个jQuery插件,可以在 我们找到源码下载. 官方的一些截图: 普通提示 可以附加事件,如点击.鼠标移入移出等 可以实现动画,如气泡围绕一个点旋转 在这里我们可以

  • javascript实现很浪漫的气泡冒出特效

    javascript实现很浪漫的气泡冒出特效

    本文实例讲述了javascript实现很浪漫的气泡冒出特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 实现思路:HTML里只需要一个CANVAS元素,Javascript里操作canvas 1.给canvas里绘制背景图片 2.在绘制半径为0-10px的圆形,x坐标屏幕水平随机,y所标竖直大于屏幕高度. 圆形背景色可以是随机,那就是各种色彩了!    利用计时器控制y-- 构建html <!doctype html> <html lang="en

  • js由下向上不断上升冒气泡效果实例

    本文实例讲述了js由下向上不断上升冒气泡效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现气泡从水中急速上升效果</title> <style type="text/css"> body { cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#FFF; l

随机推荐