快捷導(dǎo)航

js實(shí)現(xiàn)可愛的氣泡特效

更新時(shí)間：2020年09月05日 10:08:30 作者：那誰呀撒

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)可愛的氣泡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)可愛的氣泡特效的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!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);
    // 再實(shí)現(xiàn)變大和繪制
    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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

用JS提交參數(shù)創(chuàng)建form表單在FireFox中遇到的問題
在一個(gè)前端頁面上，需要通過JavaScript來提交參數(shù)，使用JS創(chuàng)建form表單，將參數(shù)append到表單中進(jìn)行提交,接下來將介紹如何操作與實(shí)現(xiàn)
2013-01-01
生產(chǎn)制造追溯系統(tǒng)之再說條碼打印
這篇文章主要介紹了生產(chǎn)制造追溯系統(tǒng)之再說條碼打印，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)
Hash Map通常在JavaScript中作為一個(gè)簡單的來存儲(chǔ)鍵值對的地方,不過哈希對象Object并不是一個(gè)真正的哈希映射,沒Java中的Hash Map來的那么強(qiáng)大,well,接下來帶大家詳解JavaScript中Hash Map映射結(jié)構(gòu)的實(shí)現(xiàn)
2016-05-05
JavaScript簡單驗(yàn)證表單空值及郵箱格式的方法
這篇文章主要介紹了JavaScript簡單驗(yàn)證表單空值及郵箱格式的方法,涉及javascript基本的表單與字符串操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2017-01-01
IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例
下面小編就為大家?guī)硪黄狪ntersectionObserver實(shí)現(xiàn)圖片懶加載的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
前端必備插件之純原生JS的瀑布流插件Macy.js
這篇文章主要介紹了前端必備插件之純原生JS的瀑布流插件Macy.js，一款非常輕量級(jí)的純原生JS的瀑布流插件，有興趣的可以了解一下
2017-11-11
利用d3.js制作連線動(dòng)畫圖與編輯器的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何利用d3.js制作連線動(dòng)畫圖與編輯器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用d3.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Javascript 瀏覽器事件小結(jié)
Javascript中的事件都是與對象相關(guān)聯(lián)的，而不是語言本身所有，當(dāng)Javascript在瀏覽器中運(yùn)行的時(shí)候，事件與每個(gè)瀏覽器實(shí)現(xiàn)的DOM模型有關(guān)。
2010-02-02
json屬性名為什么要雙引號(hào)(個(gè)人猜測)
json屬性名為什么要雙引號(hào)？更加規(guī)范,利于解析、避免class等關(guān)鍵字引起的不兼容問題,需要的朋友可以參考下
2014-07-07
利用JavaScript控制元素(標(biāo)簽)的顯示與隱藏
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript控制元素(標(biāo)簽)的顯示與隱藏的相關(guān)資料,JavaScript有多種方式可以實(shí)現(xiàn),文中介紹了三種方法以及區(qū)別,需要的朋友可以參考下
2023-07-07