Contoh Aplikasi

Beranda
CSS

Cara Membuat Animasi Teks Berbentuk Hati dengan HTML5 Canvas

Artikel berikut membahas mengenai Cara Membuat Animasi Teks Berbentuk Hati dengan HTML5 Canvas
Cara Membuat Animasi Teks Berbentuk Hati dengan HTML5 Canvas

Apakah Anda ingin membuat animasi teks berbentuk hati yang romantis untuk pasangan, proyek kreatif, atau sekadar eksperimen coding? Dengan HTML5 Canvas dan JavaScript, Anda bisa membuat efek visual yang menakjubkan dengan hanya beberapa baris kode!

Di artikel ini, kami akan membagikan tutorial lengkap beserta kode sumbernya. Simak langkah-langkahnya di bawah ini!

Apa yang Akan Anda Buat?

Anda akan membuat animasi teks "I Love You" yang membentuk pola hati dan berputar secara halus di layar. Efek ini menggunakan:

  • HTML5 Canvas untuk menggambar grafis dinamis.
  • JavaScript untuk mengatur animasi dan pergerakan teks.
  • Fungsi Matematika untuk membentuk kurva hati yang indah.

Hasilnya adalah animasi yang cocok untuk ungkapan cinta atau dekorasi website romantis!

Kode Lengkap Animasi Hati

Berikut adalah kode HTML, CSS, dan JavaScript yang digunakan: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Heart Text Animation</title>
  <style>
    body {
      margin: 0;
      background: black;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="heartCanvas"></canvas>

  <script>
    const canvas = document.getElementById("heartCanvas");
    const ctx = canvas.getContext("2d");

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

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const text = "I Love You ";
    const fontSize = 16;

    ctx.font = `${fontSize}px Arial`;
    ctx.fillStyle = "#ff69b4"; // Warna pink cerah
    ctx.textAlign = "center";
    ctx.shadowColor = "#ff69b4";
    ctx.shadowBlur = 10;

    let angle = 0;

    // Fungsi untuk membuat bentuk hati
    function heartFunction(t) {
      const scale = 10;
      const x = scale * 16 * Math.pow(Math.sin(t), 3);
      const y = -scale * (
        13 * Math.cos(t) -
        5 * Math.cos(2 * t) -
        2 * Math.cos(3 * t) -
        Math.cos(4 * t)
      );
      return { x, y };
    }

    // Animasi teks mengikuti bentuk hati
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const total = 100;

      for (let i = 0; i < total; i++) {
        const t = ((i / total) * 2 * Math.PI) + angle;
        const pos = heartFunction(t);
        ctx.fillText(text, centerX + pos.x, centerY + pos.y);
      }

      angle += 0.01; // Kecepatan rotasi
      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>

Penjelasan Kode

  1. HTML & CSS

    • <canvas> digunakan sebagai area menggambar.
    • Latar belakang diatur hitam (background: black) agar teks pink terlihat jelas.

  2. JavaScript

    • heartFunction(t) adalah rumus matematika untuk membuat kurva berbentuk hati.
    • draw() mengatur animasi teks agar mengikuti pola hati dan berputar.
    • requestAnimationFrame membuat animasi berjalan lancar.

Cara Menggunakan Kode Ini

  1. Salin kode di atas ke file .html.
  2. Buka file di browser.
  3. Ubah teks "I Love You" dengan pesan Anda sendiri.
  4. Sesuaikan warna, ukuran font, atau kecepatan rotasi sesuai keinginan.

Ide Kreatif untuk Animasi Ini

  • Ungkapan Cinta Digital: Kirimkan sebagai hadiah virtual untuk pasangan.
  • Dekorasi Website: Tambahkan di landing page pernikahan atau acara spesial.
  • Efek Loading Unik: Gunakan sebagai animasi loading di website.

Kesimpulan

Dengan HTML5 Canvas dan JavaScript, Anda bisa membuat animasi teks berbentuk hati yang indah hanya dengan beberapa baris kode. Kode ini mudah dikustomisasi dan cocok untuk berbagai keperluan romantis atau kreatif.🚀