Artikel ini terutama memperkenalkan panduan untuk menggunakan metode kanvas HTML5. Ini sangat sederhana dan jelas. Ini adalah artikel yang sangat bagus. Saya merekomendasikannya kepada Anda di sini.
Metode kanvas
save () menyimpan status lingkungan saat ini
restore () mengembalikan status jalur dan properti yang telah disimpan sebelumnya
createEvent ()
getContext () Mengembalikan objek yang menunjukkan API yang diperlukan untuk mengakses fungsi menggambar
todataupl () mengembalikan URL gambar kanvas
Properti dan Metode Gaya Garis
milik:
Linecap mengatur atau mengembalikan gaya titik akhir garis garis
LineJoin menetapkan atau mengembalikan jenis sudut yang dibuat ketika dua baris berpotongan.
set linewidth atau mengembalikan lebar baris saat ini.
MiteriLlimit menetapkan atau mengembalikan panjang mitra maksimum
Properti dan Metode Warna, Gaya dan Bayangan
milik
mengisi set atau mengembalikan warna, gradien atau mode yang digunakan untuk mengisi lukisan
set strokestyle atau mengembalikan warna, gradien atau mode yang digunakan untuk stroke
set shadowcolor atau kembalikan warna yang digunakan untuk bayangan
Shadowblur mengatur atau mengembalikan level blur yang digunakan untuk bayangan
Shadowoffsetx mengatur atau mengembalikan jarak horizontal bayangan ke bentuk
Shadowoffsety menetapkan atau mengembalikan jarak vertikal bayangan ke bentuk
metode
CreateLineargradient () Membuat gradien linier (digunakan pada konten kanvas)
createPattern () mengulangi elemen yang ditentukan dalam arah yang ditentukan
createradialgradient () membuat gradien radial/cincin (digunakan pada konten kanvas)
AddColorstop () menentukan posisi warna atau berhenti di objek gradien
Metode jalur
isi () mengisi gambar saat ini (jalur)
stroke () menggambar jalur yang ditentukan
beginpath () memulai jalur, atau mengatur ulang jalur saat ini
moveto () memindahkan jalur ke titik yang ditentukan di kanvas tanpa membuat garis
ClosePath () menciptakan jalur dari titik saat ini ke titik awal
lineto () menambahkan titik baru untuk membuat garis dari titik itu ke titik yang ditentukan terakhir
clip () memotong area bentuk dan ukuran apa pun dari kanvas asli
QuadratCurveto () menciptakan kurva bezier kedua
beziercureto () menciptakan kurva bezier terakhir
arc () menciptakan busur/kurva (digunakan untuk membuat lingkaran atau lingkaran parsial)
arcto () menciptakan busur/kurva antara dua garis singgung
isPointInpath () mengembalikan nilai boolean jika titik yang ditentukan berada di jalur saat ini
persegi panjang
Rect () menciptakan persegi panjang
fillrect () menggambar persegi panjang yang diisi
strokerect () menggambar persegi panjang (tanpa isi)
clearrect () membersihkan piksel yang ditentukan dalam persegi panjang yang diberikan
Atur properti dan metode teks
milik:
font mengatur atau mengembalikan properti font saat ini dari konten teks
TextAlign Set atau kembalikan penyelarasan konten teks saat ini
Pengaturan TextBaseline mengembalikan baseline teks saat ini yang digunakan saat menggambar teks.
metode:
filltext () menggambar teks yang diisi di atas kanvas
strokeText () menggambar teks di kanvas (tanpa isi)
MeasureText () Mengembalikan objek yang berisi lebar teks yang ditentukan
Metode konversi
skala () skala plot saat ini untuk lebih besar atau lebih kecil
putar () memutar gambar saat ini
translate () Kembalikan posisi (0,0) dari kemeja bunga
transform () menggantikan matriks transformasi saat ini dari gambar
setTransform () mengatur ulang konversi saat ini ke matriks unit. Kemudian jalankan transformasi ()