- Canvas
- Grafik Vektor terukur (SVG)
Element Canvas
Elemen HTML digunakan untuk menggambar grafik pada halaman web.<canvas>
Grafik di sebelah kiri dibuat dengan . Ini menunjukkan empat elemen: persegi panjang merah, persegi panjang gradien, persegi panjang warna-warni, dan teks warna-warni.<canvas>
Apa itu KANVAS HTML?
Elemen HTML digunakan untuk menggambar grafis, dengan cepat, melalui JavaScript.<canvas>
Elemen ini hanya wadah untuk grafik. Anda harus menggunakan JavaScript untuk benar-benar menggambar grafik.<canvas>
Canvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, teks, dan menambahkan gambar.
Berikut ini adalah contoh menggambar lingkaran menggunakan Elemen Kanvas:
Kanvas adalah area persegi panjang pada halaman HTML. Secara default, kanvas tidak memiliki batas dan tidak ada konten.
Markup terlihat seperti ini:
<canvas id="myCanvas" width="200" height="100"></canvas>Nota: Selalu tentukan atribut (untuk dirujuk dalam skrip), dan atribut untuk menentukan ukuran kanvas. Untuk menambahkan batas, gunakan atribut.idwidthheightstyle
Grafis SVG HTML
SVG mendefinisikan grafik berbasis vektor dalam format XML.
Apa itu SVG?
- SVG adalah singkatan dari Scalable Vector Graphics.
- SVG digunakan untuk menentukan grafik untuk Web
- SVG adalah rekomendasi W3C
Elemen HTML <svg>
Elemen HTML adalah wadah untuk grafis SVG.<svg>
SVG memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, teks, dan gambar grafis.
Elemen <SVG>:
- didasarkan pada keluarga grafis berbasis vektor.
- mendefinisikan grafik dalam Format XML.
- membuat grafik yang tidak kehilangan kualitas apa pun saat diperbesar atau diubah ukurannya
Berikut ini adalah contoh menggambar persegi panjang menggunakan elemen <SVG>:
Perbedaan antara elemen Canvas dan SVG
| Kanvas | svg |
Canvas menggambar grafis 2D, dengan cepat (dengan JavaScript). | SVG mendefinisikan grafik dalam format XML. |
Tergantung resolusi. | Resolusi independen. |
Kanvas dirender piksel menurut piksel. | Dalam SVG, setiap bentuk yang digambar diingat sebagai objek. |
SVG adalah bahasa untuk menggambarkan grafis 2D dalam XML.
Canvas menggambar grafis 2D, dengan cepat (dengan JavaScript).
SVG berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan penangan peristiwa JavaScript untuk suatu elemen.
Dalam SVG, setiap bentuk yang digambar diingat sebagai objek. Jika atribut objek SVG diubah, browser dapat secara otomatis merender ulang bentuk.
Kanvas dirender piksel menurut piksel. Di kanvas, setelah grafik digambar, itu dilupakan oleh browser. Jika posisinya harus diubah, seluruh adegan perlu digambar ulang, termasuk objek apa pun yang mungkin telah dicakup oleh grafik.