HTML

CSS

JavaScript

$(document).ready(function () {
  const canvas = document.getElementById('waveCanvas');
  const ctx = canvas.getContext('2d');

// Set the canvas dimensions to match the browser window
  const width = window.innerWidth;
  const height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;

// Grid and wave parameters
  const gridSize = 20;  // The size of each grid cell
  const pointRadius = 1; // The radius of each dot in the grid
  const waveAmplitude = 38;  // Amplitude of the wave (controls how much the dots move vertically)
  const waveSpeed = 0.01;    // Speed of the wave (controls how quickly the wave propagates)
  let time = 0;

// Function to draw the grid of dots
  function drawGrid() {
    // Clear the canvas before redrawing the grid
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = '#000'; // Set the fill color for the dots (black)

// Loop through the grid columns and rows
    for (let x = 0; x <= width; x += gridSize) { // Loop through the horizontal grid lines
      for (let y = 0; y <= height; y += gridSize) { // Loop through the vertical grid lines
        // Calculate the wave effect using a sine function
        const waveEffect = Math.sin((x + time) * waveSpeed) * waveAmplitude;
        const newY = y + waveEffect; // Adjust the y-position based on the wave effect

// Draw a dot (circle) at the calculated position
        ctx.beginPath();
        ctx.arc(x, newY, pointRadius, 0, Math.PI * 2); // Draw the dot with the specified radius
        ctx.fill(); // Fill the dot with the current fill style (black)
      }
    }
  }

// Function to update the grid with the wave effect
  function updateGrid() {
    time += 1;  // Increment the time variable to animate the wave
    drawGrid(); // Redraw the grid with the updated wave effect
    requestAnimationFrame(updateGrid); // Continue updating the animation on the next frame
  }

// Start the animation by calling the updateGrid function
  updateGrid();
});

Preview: Sample code Wave Effect hiển thị trên lưới

By me a coffee

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Sample code Wave Effect hiển thị trên lưới

Đăng nhập

Đăng ký