Panduan Rujukan Canvas HTML
Panduan Rujukan Canvas HTML
HTML <canvas> tag digunakan untuk menggambar grafik secara dinamis melalui skrip (biasanya JavaScript).
Untuk mendapatkan informasi lebih lanjut tentang <canvas>, baca tutorial HTML Canvas kami.
Warna, gaya, dan bayangan
| Atribut |
Deskripsi |
| fillStyle |
Atur atau kembalikan warna, gelombang, atau pola yang digunakan untuk pengisian |
| strokeStyle |
Atur atau kembalikan warna, gelombang, atau pola yang digunakan untuk tinta |
| 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 ke kiri dari bayangan ke bentuk |
| shadowOffsetY |
Atur atau kembalikan jarak vertikal ke bawah dari bayangan ke bentuk |
Gaya garis
| Atribut |
Deskripsi |
| lineCap |
Atur atau kembalikan gaya ujung garis |
| lineJoin |
Atur atau kembalikan jenis ujung yang dibuat saat garis bertemu |
| lineWidth |
Atur atau kembalikan lebar garis saat ini |
| miterLimit |
Atur atau kembalikan panjang maksimal miter |
Persegi panjang
| Metode |
Deskripsi |
| rect() |
Buat persegi panjang |
| fillRect() |
Rendahkan persegi panjang yang diisi |
| strokeRect() |
Rendahkan persegi panjang (tanpa diisi) |
| clearRect() |
Bersihkan pixel yang ditentukan di dalam persegi panjang yang diberikan |
Jalur
| Metode |
Deskripsi |
| fill() |
Isi lukisan saat ini (jalur) |
| stroke() |
Rendahkan jalur yang telah ditentukan |
| beginPath() |
Mulai jalur baru, atau atur ulang jalur saat ini |
| moveTo() |
Pindahkan jalur ke titik yang ditentukan di atas kanvas, tanpa membuat garis |
| closePath() |
Buat jalur dari titik saat ini kembali ke titik awal |
| lineTo() |
Tambah satu titik baru, lalu buat garis dari titik itu ke titik yang ditentukan terakhir di atas kanvas |
| clip() |
Meng剪切画布上的任何形状和ukuran |
| quadraticCurveTo() |
Buat garis kurva kuadrat |
| bezierCurveTo() |
Buat garis kurva kubik |
| arc() |
Buat garis bulat/curva (digunakan untuk membuat lingkaran atau bagian lingkaran) |
| arcTo() |
Buat garis bulat/curva di antara dua garis tangens |
| isPointInPath() |
Kembalikan true jika titik yang ditentukan berada di dalam jalur saat ini, sebaliknya kembalikan false |
Transformasi
| Metode |
Deskripsi |
| scale() |
Besarkan atau kecilkan penggambaran saat ini |
| rotate() |
Putar penggambaran saat ini |
| translate() |
Ulangi referensi (0,0) di kanvas |
| transform() |
Ganti matriks transformasi penggambaran saat ini |
| setTransform() |
Kembalikan transformasi saat ini ke matriks satuan. Lalu jalankan transform() |
Teks
| Atribut |
Deskripsi |
| font |
Tetapkan atau kembalikan atribut fonta konten teks saat ini |
| textAlign |
Tetapkan atau kembalikan gaya penyesuaian teks konten saat ini |
| textBaseline |
Tetapkan atau kembalikan baseline teks saat ini yang digunakan untuk menggambar teks |
| Metode |
Deskripsi |
| fillText() |
Gambar teks 'diisi' di kanvas |
| strokeText() |
Gambar teks di kanvas (tanpa pengisian) |
| measureText() |
Kembalikan objek yang mengandung lebar teks yang ditentukan |
Gambaran gambar
| Metode |
Deskripsi |
| drawImage() |
Gambarkan gambar, kanvas, atau video ke kanvas |
Operasi pixel
| Atribut |
Deskripsi |
| width |
Kembalikan lebar objek ImageData |
| height |
Kembalikan tinggi objek ImageData |
| data |
Kembalikan objek yang mengandung data gambar ImageData yang ditentukan |
| Metode |
Deskripsi |
| createImageData() |
Buat objek ImageData yang baru, kosong |
| getImageData() |
Kembalikan objek ImageData, yang mengandung data gambar objek ImageData yang ditentukan |
| putImageData() |
Balikkan data gambar (dari objek ImageData yang ditentukan) ke kanvas |
Komposisi
| Atribut |
Deskripsi |
| globalAlpha |
Tetapkan atau kembalikan nilai alpha atau kecerahan penggambaran saat ini |
| globalCompositeOperation |
Tetapkan atau kembalikan bagaimana gambar baru dikonversi ke gambar yang sudah ada |
Lain-lain
| Metode |
Deskripsi |
| save() |
Simpan status lingkungan saat ini |
| restore() |
Kembalikan status dan atribut aliran yang disimpan sebelumnya |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
