Panduan Referensi Canvas HTML
Panduan Referensi Canvas HTML
Tag <canvas> HTML digunakan untuk menggambar grafik secara dinamis melalui skrip (biasanya JavaScript).
Untuk mengetahui lebih banyak tentang <canvas>, baca tutorial HTML Canvas kami.
Warna, gaya, dan bayangan
| Atribut |
Deskripsi |
| fillStyle |
Atur atau kembalikan warna, gradien, atau pola yang digunakan untuk pengisi |
| strokeStyle |
Atur atau kembalikan warna, gradien, atau pola yang digunakan untuk pengecoran |
| shadowColor |
Atur atau kembalikan warna yang digunakan untuk bayangan |
| shadowBlur |
Atur atau kembalikan tingkat blur yang digunakan untuk bayangan |
| shadowOffsetX |
Atur atau kembalikan jarak horizontal dari bayangan ke bentuk |
| shadowOffsetY |
Atur atau kembalikan jarak vertikal dari bayangan ke bentuk |
Gaya garis
| Atribut |
Deskripsi |
| lineCap |
Atur atau kembalikan gaya ujung garis |
| lineJoin |
Atur atau kembalikan jenis sudut yang dibuat saat garis bertemu |
| lineWidth |
Atur atau kembalikan lebar garis saat ini |
| miterLimit |
Atur atau kembalikan panjang maksimal sudut samping |
Persegi panjang
| Metode |
Deskripsi |
| rect() |
Buat persegi panjang |
| fillRect() |
Garis persegi panjang yang diisi |
| strokeRect() |
Garis persegi panjang (tanpa pengisi) |
| clearRect() |
Bersihkan pixel yang ditentukan di dalam persegi panjang yang diberikan |
Jalur
| Metode |
Deskripsi |
| fill() |
Isi gambar saat ini (jalur) |
| stroke() |
Garis jalur yang telah ditentukan |
| beginPath() |
Mulai jalur baru, atau atur ulang jalur saat ini |
| moveTo() |
Pindahkan jalur ke titik yang ditentukan di kanvas tanpa membuat garis |
| closePath() |
Buat jalur dari titik saat ini kembali ke titik awal |
| lineTo() |
Tambahkan titik baru, dan buat garis dari titik ini ke titik yang ditentukan di kanvas |
| clip() |
Memotong daerah apapun berukuran dan bentuk dari kanvas asli |
| quadraticCurveTo() |
Buat curva kuadrat |
| bezierCurveTo() |
Buat curva kubik |
| arc() |
Buat serupa lingkaran/curva (digunakan untuk membuat lingkaran atau bagian lingkaran) |
| arcTo() |
Buat serupa lingkaran/curva di antara dua garis tegak lurus |
| isPointInPath() |
Kembalikan true jika titik yang ditentukan berada di jalur saat ini, sebaliknya kembalikan false |
Transformasi
| Metode |
Deskripsi |
| scale() |
Besarkan atau kecilkan pengerian saat ini |
| rotate() |
Putar pengerian saat ini |
| translate() |
Ulangi lokasi (0,0) di layar |
| transform() |
Ganti matriks transformasi pengerian saat ini |
| setTransform() |
Atur transformasi saat ini kembali ke matriks unit. kemudian jalankan transform() |
Teks
| Atribut |
Deskripsi |
| font |
Atur atau kembalikan atribut huruf saat ini |
| textAlign |
Atur atau kembalikan gaya penempatan teks saat ini |
| textBaseline |
Atur atau kembalikan baseline teks saat pengerian |
| Metode |
Deskripsi |
| fillText() |
Menggambar teks yang diisi di layar |
| strokeText() |
Menggambar teks di layar (tanpa pengisian) |
| measureText() |
Kembalikan objek yang berisi lebar teks yang ditentukan |
Pengerian Gambar
| Metode |
Deskripsi |
| drawImage() |
Menggambar gambar, layar, atau video ke layar |
Operasi pixel
| Atribut |
Deskripsi |
| width |
Kembalikan lebar objek ImageData |
| height |
Kembalikan tinggi objek ImageData |
| data |
Kembalikan objek yang berisi data gambar dari ImageData yang ditentukan |
| Metode |
Deskripsi |
| createImageData() |
Buat objek ImageData yang baru, kosong |
| getImageData() |
Kembalikan objek ImageData, yang berisi data pixel gambar yang dicopy di lingkungan yang ditentukan |
| putImageData() |
Balikkan data gambar (dari objek ImageData yang ditentukan) ke layar |
Kombinasi
| Atribut |
Deskripsi |
| globalAlpha |
Atur atau kembalikan nilai alpha atau kecerahan saat pengerian |
| globalCompositeOperation |
Atur atau kembalikan bagaimana gambar baru diрисakan ke atas gambar yang sudah ada |
Lainnya
| Metode |
Deskripsi |
| save() |
Simpan status lingkungan saat ini |
| restore() |
Kembalikan status dan atribut jalur yang disimpan sebelumnya |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
