快捷導(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>

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

您可能感興趣的文章:

相關(guān)文章

微信小程序通過uni-app進(jìn)行全局分享
這篇文章主要介紹了微信小程序通過uni-app進(jìn)行全局分享，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，需要的朋友可以收藏下
2021-11-11
js實(shí)現(xiàn)前面自動(dòng)補(bǔ)全位數(shù)的方法
今天小編就為大家分享一篇js實(shí)現(xiàn)前面自動(dòng)補(bǔ)全位數(shù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
JavaScript canvas實(shí)現(xiàn)七彩太陽光暈效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)七彩太陽光暈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法
在JavaScript中,將年月日轉(zhuǎn)換為時(shí)間戳可以通過多種方式實(shí)現(xiàn),下面給大家分享JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法,感興趣的朋友跟隨小編一起看看吧
2024-08-08
JS模仿手機(jī)端九宮格登錄功能實(shí)現(xiàn)代碼
這篇文章主要介紹了JS模仿手機(jī)端九宮格登錄功能實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
2016-04-04
easyui form validate總是返回false的原因及解決方法
下面小編就為大家?guī)硪黄猠asyui form validate總是返回false的原因及解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
GoJs圖形繪圖模板Shape示例詳解
這篇文章主要為大家介紹了GoJs圖形繪圖模板Shape示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
javascript 模擬點(diǎn)擊廣告
我們不管js或iframe怎么調(diào)用的，模擬點(diǎn)擊就意味著打開廣告鏈接，廣告商就以為用戶點(diǎn)擊了他的廣告，所以我們只要保證點(diǎn)擊了一個(gè)鏈接但沒有跳出頁面的結(jié)果就行了，是嗎？
2010-01-01
JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件
這篇文章主要介紹了JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件的相關(guān)資料,需要的朋友可以參考下
2015-12-12