欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript利用Canvas實現(xiàn)粒子動畫倒計時

 更新時間：2022年12月09日 16:23:57   作者：蠟筆小心_  
粒子動畫就是頁面上通過發(fā)射許多微小粒子來表示不規(guī)則模糊物體。本文將利用canvas實現(xiàn)酷炫的粒子動畫倒計時，感興趣的小伙伴可以嘗試一下

canvas 粒子動畫介紹

何為canvas

canvas是HTML5中新增的一個標簽，主要是用于網(wǎng)頁實時生成圖像并可操作圖像，它是用JavaScript操作的bitmap。

粒子動畫是啥

粒子動畫就是頁面上通過發(fā)射許多微小粒子來表示不規(guī)則模糊物體，比如：用小圓點來模擬下雪、下雨的效果，用模糊線條模擬黑客帝國背景效果等。

canvas

新建一個HTML文件，寫入canvas標簽用于后續(xù)展示倒計時

<canvas id="canvas-number"></canvas>
<canvas id="canvas-dots"></canvas>
  • canvas-number 是用于倒計時數(shù)字展示
  • canvas-dots 是用于全屏粒子動畫展示

加點樣式效果看看吧

body {
  background-color: #24282f;
  margin: 0;
  padding: 0;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#canvas-number {
  width: 680px;
  height: 420px;
}

主要是定義了 canvas-number 畫布大小，canvas-dots 畫布大小會在JavaScript中定義

定義初始變量

在JavaScript中定義所需的變量

var numberStage,
  numberStageCtx,
  numberStageWidth = 680,
  numberStageHeight = 420,
  numberOffsetX,
  numberOffsetY,

  stage,
  stageCtx,
  stageWidth = window.innerWidth,
  stageHeight = window.innerHeight,
  stageCenterX = stageWidth / 2,
  stageCenterY = stageHeight / 2,

  countdownFrom = 3,
  countdownTimer = 2800,
  countdownRunning = true,

  number,
  dots = [],
  numberPixelCoordinates,
  circleRadius = 2,
  colors = ['61, 207, 236', '255, 244, 174', '255, 211, 218', '151, 211, 226'];
  • numberStage - stageCenterY 這一塊主要是定義畫布寬高和坐標
  • countdownFrom 從 10 開始倒計時
  • countdownTimer 數(shù)字顯示的時長
  • countdownRunning 動起來
  • colors 頁面上所有粒子顏色
  • 其他的可以自己理解一下哦~

初始化canvas和數(shù)字文本

創(chuàng)建一個init函數(shù)，里面會包裹初始化內(nèi)容

function init() {

  // 初始化canvas-number
  numberStage = document.getElementById("canvas-number");
  numberStageCtx = numberStage.getContext('2d');
  
  // 設置文字文本的窗口大小
  numberStage.width = numberStageWidth;
  numberStage.height = numberStageHeight;

  // 初始化canvas-dots和窗口大小
  stage = document.getElementById("canvas-dots");
  stageCtx = stage.getContext('2d');
  stage.width = stageWidth;
  stage.height = stageHeight;

  // 設置一定的偏移量，讓文字居中
  numberOffsetX = (stageWidth - numberStageWidth) / 2;
  numberOffsetY = (stageHeight - numberStageHeight) / 2;
}

根據(jù)代碼中的注釋可以了解初始化的內(nèi)容哦~

初始化完成之后，我們需要直接運行方法

init();

在init函數(shù)結束之后，馬上就需要運行該函數(shù)了

創(chuàng)建一定數(shù)量的點

for (var i = 0; i < 2240; i++) {
    var dot = new Dot(randomNumber(0, stageWidth), randomNumber(0, stageHeight), colors[randomNumber(1, colors.length)], .3);
    dots.push(dot);
    tweenDots(dot, '', 'space');
}
  • 循環(huán)創(chuàng)建點，這里循環(huán)給的是個固定數(shù)據(jù)
  • new Dot 是創(chuàng)建點對象的方法
  • tweenDots 是讓點動起來的第三方js
function Dot(x, y, color, alpha) {

  var _this = this;

  _this.x = x;
  _this.y = y;
  _this.color = color;
  _this.alpha = alpha;

  this.draw = function () {
    stageCtx.beginPath();
    stageCtx.arc(_this.x, _this.y, circleRadius, 0, 2 * Math.PI, false);
    stageCtx.fillStyle = 'rgba(' + _this.color + ', ' + _this.alpha + ')';
    stageCtx.fill();
  }

}
  • 通過 x、y坐標定位點
  • 通過隨機顏色，讓點樣式更豐富
  • draw 里面的內(nèi)容都是canvas畫圖的方法，具體可參考canvas文檔

倒計時

function countdown() {

  // 發(fā)送倒計時數(shù)字
  drawNumber(countdownFrom.toString());

  // 倒計時為 0 時停止
  if (countdownFrom === 0) {
    countdownRunning = false;
    drawNumber('蠟筆小心');
  }

  countdownFrom--;
}

倒計時結束之后，就可以想干啥干啥了，這里我重新輸出了額外的文字

countdownFrom 需要做遞減的操作

countdown();

我們需要在頁面進入時，直接觸發(fā)倒計時函數(shù)

倒計時文本繪畫

每一個倒計時都需要用不同的點去繪制

這里通過循環(huán) 讓每個文本都有四種顏色繪制

function drawNumber(num) {
  numberStageCtx.clearRect(0, 0, numberStageWidth, numberStageHeight);
  numberStageCtx.fillStyle = "#24282f";
  numberStageCtx.textAlign = 'center';
  numberStageCtx.font = "bold 118px Lato";
  numberStageCtx.fillText(num, 250, 300);

  var ctx = document.getElementById('canvas-number').getContext('2d');
  var imageData = ctx.getImageData(0, 0, numberStageWidth, numberStageHeight).data;
  numberPixelCoordinates = [];
  for (var i = imageData.length; i >= 0; i -= 4) {
    if (imageData[i] !== 0) {
      var x = (i / 4) % numberStageWidth;
      var y = Math.floor(Math.floor(i / numberStageWidth) / 4);
      if ((x && x % (circleRadius * 2 + 3) == 0) && (y && y % (circleRadius * 2 + 3) == 0)) {
        numberPixelCoordinates.push({
          x: x,
          y: y
        });
      }
    }
  }
  formNumber();
}

function formNumber() {
  for (var i = 0; i < numberPixelCoordinates.length; i++) {
    tweenDots(dots[i], numberPixelCoordinates[i], '');
  }

  if (countdownRunning && countdownFrom > 0) {
    setTimeout(function () {
      breakNumber();
    }, countdownTimer);
  }
}

function breakNumber() {
  for (var i = 0; i < numberPixelCoordinates.length; i++) {
    tweenDots(dots[i], '', 'space');
  }

  if (countdownRunning) {
    setTimeout(function () {
      countdown();
    }, countdownTimer);
  }

}

循環(huán)繪制

function loop() {
  stageCtx.clearRect(0, 0, stageWidth, stageHeight);
  for (var i = 0; i < dots.length; i++) {
    dots[i].draw(stageCtx);
  }
  requestAnimationFrame(loop);
}
loop();

循環(huán)繪制，需要進入頁面即執(zhí)行，所以在方法之后馬上執(zhí)行該函數(shù)

點動畫

在倒計時文本中，我們一直會調(diào)用tweenDots方法，就是用于點動畫效果的繪制

function tweenDots(dot, pos, type) {
  if (type === 'space') {
    TweenMax.to(dot, (3 + Math.round(Math.random() * 100) / 100), {
      x: randomNumber(0, stageWidth),
      y: randomNumber(0, stageHeight),
      alpha: 0.3,
      ease: Cubic.easeInOut,
      onComplete: function () {
        tweenDots(dot, '', 'space');
      }
    });
  } else {
    TweenMax.to(dot, (1.5 + Math.round(Math.random() * 100) / 100), {
      x: (pos.x + numberOffsetX),
      y: (pos.y + numberOffsetY),
      delay: 0,
      alpha: 1,
      ease: Cubic.easeInOut,
      onComplete: function () {}
    });
  }
}

function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}
  • 隨機移動畫布周圍的點
  • 讓點和文本內(nèi)容協(xié)調(diào)展示

效果圖

以上就是JavaScript利用Canvas實現(xiàn)粒子動畫倒計時的詳細內(nèi)容，更多關于JavaScript Canvas粒子動畫倒計時的資料請關注腳本之家其它相關文章！

相關文章

  • 實例講解JavaScript 計時事件

    實例講解JavaScript 計時事件

    這篇文章主要介紹了JavaScript 計時事件的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下
    2020-07-07
  • javascript中使用正則計算中文長度的例子

    javascript中使用正則計算中文長度的例子

    這篇文章主要介紹了javascript中使用正則計算中文長度的例子,需要的朋友可以參考下
    2014-04-04
  • JavaScript重定向URL參數(shù)的兩種方法小結

    JavaScript重定向URL參數(shù)的兩種方法小結

    關于JavaScript重定向URL參數(shù)的實現(xiàn)方法網(wǎng)站有很多，這篇文章的主要內(nèi)容是從網(wǎng)上查找，并進行了修改，簡單粗暴的實現(xiàn)使用JavaScript重置url參數(shù)，文中給出了詳細的示例代碼和調(diào)用代碼，對大家的理解和學習很有幫助，感興趣的朋友們下面來一起看看吧。
    2016-10-10
  • 詳解JS正則replace的使用方法

    詳解JS正則replace的使用方法

    這篇文章主要為大家詳細介紹了javascript正則replace的使用方法，感興趣的朋友可以參考一下
    2016-03-03
  • JS加載iFrame出現(xiàn)空白問題的解決辦法

    JS加載iFrame出現(xiàn)空白問題的解決辦法

    在使用IE6瀏覽器開發(fā)過程中出現(xiàn)各種奇葩問題，非常棘手，費勁腦汁終于問題解決。小編把解決辦法分享到腳本之家平臺，需要的朋友可以參考下
    2016-05-05
  • select2 ajax 設置默認值,初始值的方法

    select2 ajax 設置默認值,初始值的方法

    今天小編就為大家分享一篇select2 ajax 設置默認值,初始值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 用vbs實現(xiàn)的連連看在線游戲

    用vbs實現(xiàn)的連連看在線游戲

    大家可以參考下代碼，發(fā)現(xiàn)這個真?zhèn)€不錯的思路
    2008-07-07
  • 如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能

    如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能

    最近為小程序增加語音識別轉(zhuǎn)文字的功能,坑路不斷,特此記錄,下面這篇文章主要給大家介紹了關于如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • JavaScript中為事件指定處理程序的五種方式分析

    JavaScript中為事件指定處理程序的五種方式分析

    這篇文章主要介紹了JavaScript中為事件指定處理程序的五種方式,結合實例形式簡單分析了JavaScript事件處理的相關原理與事件指定處理程序的五種常用方式,需要的朋友可以參考下
    2018-07-07
  • 80行代碼寫一個Webpack插件并發(fā)布到npm

    80行代碼寫一個Webpack插件并發(fā)布到npm

    最近在學習 Webpack 相關的原理，本文用80行代碼寫一個Webpack插件并發(fā)布到npm，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-05-05

最新評論