JavaScript+Canvas實現帶跳動效果的粒子動畫

Posted on by

前言

用 HTML5 的 Canvas 元素實現一個帶有跳動效果的粒子動畫。會用到 Canvas 的2D渲染上下文，通過 JavaScript 編寫繪圖代碼，實現畫佈上一系列粒子的隨機運動和相互作用。還會使用 CSS3 動畫屬性，使得畫佈背景顏色和粒子顏色能夠流暢地過渡，達到更加自然的效果。

代碼運行效果在底部

實現過程

1.創建 Canvas 元素，並獲取其上下文

在實現粒子跳動動畫的過程中，第一步需要創建一個 Canvas 元素，並獲取其上下文。Canvas 元素是 HTML5 中的一個重要組件，它提供瞭一個可以通過 JavaScript 編寫繪圖代碼的區域，可以用來實現各種各樣的動畫效果。獲取 Canvas 上下文後，可以在其中繪制各種圖形，並對它們進行操作，例如填充顏色、添加動畫等等。因此，在實現任何 Canvas 動畫之前，首先需要創建 Canvas 元素，並獲取其上下文。

//創建Canvas元素並獲取其上下文
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.getElementById('app').appendChild(canvas)
document.body.style.backgroundColor="black";

2.設置 Canvas 元素的寬高

為瞭設置 Canvas 元素的寬高，需要在 HTML 代碼中添加相應的屬性。這些屬性可以是 width 和 height，也可以是 style 屬性。其中，width 和 height 屬性可以指定 Canvas 元素的寬度和高度，而 style 屬性可以使用 CSS 樣式來定義元素的寬度和高度。為瞭確保 Canvas 元素在不同設備上顯示的效果穩定，建議使用百分比來定義寬度和高度。

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

3.創建一個粒子類，包含位置、速度、半徑等屬性，並實現繪制方法

我們需要先創建一個粒子類，該類應該包含位置、速度、半徑等屬性，並且我們可以根據需要添加更多的屬性。在創建該類之後，我們需要實現其繪制方法。

為瞭實現更好的代碼復用性和可維護性，我們可以將粒子類設計為可擴展的，例如，我們可以添加顏色、質量、生命周期等屬性。此外，我們還可以實現一些其他的方法，例如更新位置、重置粒子狀態等等。

如果我們正在開發一個粒子系統，我們可以使用該粒子類來創建和管理粒子。我們可以在屏幕上繪制多個粒子，每個粒子都有其自己的屬性和狀態。我們還可以通過修改粒子的屬性來實現不同的效果，例如改變粒子的速度、半徑等等。

總之，創建一個可擴展的粒子類可以為我們的代碼提供更好的復用性和可維護性，並且可以為我們的項目帶來更多的靈活性和創造性。

class Particle {
  constructor(x, y, radius, color) {
    // 粒子的位置坐標
    this.x = x;
    this.y = y;
    // 粒子的半徑和顏色
    this.radius = radius;
    this.color = color;
    // 粒子的下落速度
    this.speed = 4;
  }

  draw() {
    // 繪制一個圓形粒子
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }
}

4.創建粒子實例數組，並初始化

在創建粒子實例數組之前，需要確定粒子的類型和數量。可以通過定義粒子系統的屬性來實現，例如粒子的大小、速度、顏色等。在初始化過程中，可以對每個粒子的屬性進行設置，以確保它們在場景中的顯示效果符合預期。此外，還可以添加粒子之間的相互作用，以增強場景的真實感和動態性。

const particles = [];
const particleCount = 100;

for (let i = 0; i < particleCount; i++) {
  // 隨機生成粒子的位置、大小和顏色
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const radius = Math.random() * 5 + 1;
  const color = 'white';

  // 將粒子實例添加到數組中
  particles.push(new Particle(x, y, radius, color));
}

5.實現粒子的動畫效果

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  particles.forEach(particle => {
    particle.y += particle.speed; // 粒子下落速度

    if (particle.y > canvas.height + particle.radius) { // 判斷粒子是否超出屏幕
      particle.y = -particle.radius;
    }

    particle.draw(); // 繪制粒子
  });
}

animate();

該段代碼實現瞭粒子動畫的主要邏輯。通過 requestAnimationFrame 方法實現動畫的流暢性，每次調用 animate 函數都會清空畫佈，然後更新每個粒子的位置，繪制粒子。其中，粒子下落速度由 speed 屬性決定，而粒子是否超出屏幕則是根據其位置和半徑計算得出的。最終，我們調用 animate 函數開始繪制動畫。

運行效果

總結

通過 Canvas 元素和 JavaScript 代碼的結合，我們可以實現各種各樣的動畫效果。本文中使用 Canvas 元素實現瞭一個簡單的粒子跳動動畫，希望對各位掘友有幫助。

到此這篇關於JavaScript+Canvas實現帶跳動效果的粒子動畫的文章就介紹到這瞭,更多相關JavaScript Canvas粒子動畫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：