Panduan penggunaan kaedah kanvas HTML5_html5 kemahiran tutorial

Kaedah kanvas

save() menyimpan keadaan persekitaran semasa

restore() mengembalikan status laluan dan atribut yang disimpan sebelum ini

createEvent()

getContext() mengembalikan objek yang menunjukkan API yang diperlukan untuk mengakses fungsi lukisan

toDataUPL() mengembalikan URL imej kanvas

Sifat dan kaedah gaya garisan

Atribut:

lineCap menetapkan atau mengembalikan gaya titik akhir garisan

lineJoin menetapkan atau mengembalikan jenis penjuru yang dibuat apabila dua garisan bersilang

lineWidth menetapkan atau mengembalikan lebar garis semasa.

miterLimit menetapkan atau mengembalikan panjang miter maksimum

Sifat dan kaedah warna, gaya dan bayang

Atribut

fillStyle menetapkan atau mengembalikan warna, kecerunan atau corak yang digunakan untuk mengisi lukisan

Gaya pukulan menetapkan atau mengembalikan warna, kecerunan atau corak yang digunakan untuk pukulan

shadowColor menetapkan atau mengembalikan warna yang digunakan untuk bayang-bayang

shadowBlur menetapkan atau mengembalikan tahap kabur yang digunakan untuk bayang-bayang

shadowOffsetX menetapkan atau mengembalikan jarak mendatar bayang-bayang daripada bentuk

shadowOffsetY menetapkan atau mengembalikan jarak menegak bayang-bayang daripada bentuk

Kaedah

createLinearGradient() mencipta kecerunan linear (digunakan pada kandungan kanvas)

createPattern() mengulangi elemen yang ditentukan dalam arah yang ditentukan

createRadialGradient() mencipta kecerunan jejari/bulatan (digunakan pada kandungan kanvas)

addColorStop() menentukan warna atau kedudukan berhenti dalam objek kecerunan

Kaedah laluan

fill() mengisi lukisan semasa (laluan)

lejang() melukis laluan yang ditetapkan

beginPath() memulakan laluan atau menetapkan semula laluan semasa

moveTo() mengalihkan laluan ke titik yang ditentukan dalam kanvas tanpa membuat garisan

closePath() mencipta laluan dari titik semasa kembali ke titik permulaan

lineTo() menambah titik baharu dan mencipta garisan dari titik itu ke titik terakhir yang ditentukan

klip() memotong kawasan dalam sebarang bentuk dan saiz daripada kanvas asal

quadraticCurveTo() mencipta lengkung Bezier kedua

bezierCureTo() mencipta lengkung Bezier sub-persegi

arka() mencipta arka/lengkung (digunakan untuk membuat bulatan atau separa bulatan)

arcTo() mencipta lengkok/lengkung antara dua tangen

isPointInPath() mengembalikan nilai Boolean jika titik yang ditentukan terletak di laluan semasa

Segi empat tepat

Rect() mencipta segi empat tepat

fillRect() melukis segi empat tepat "diisi"

strokeRect() melukis segi empat tepat (tiada isi)

clearRect() mengosongkan piksel yang ditentukan dalam segi empat tepat yang diberikan

Tetapkan sifat dan kaedah teks

Atribut:

font Menetapkan atau mengembalikan atribut fon semasa kandungan teks

textAlign menetapkan atau mengembalikan penjajaran semasa kandungan teks

Tetapan textBaseline mengembalikan garis dasar teks semasa yang digunakan semasa melukis teks.

Kaedah:

fillText() melukis teks "diisi" pada kanvas

strokeText() melukis teks pada kanvas (tiada padding)

measureText() mengembalikan objek yang mengandungi lebar teks yang ditentukan

Kaedah penukaran

skala() menskalakan lukisan semasa kepada saiz yang lebih besar atau lebih kecil

rotate() memutarkan lukisan semasa

translate() memetakan semula kedudukan (0,0) baju bunga

transform() menggantikan matriks transformasi semasa lukisan

setTransform() menetapkan semula transformasi semasa kepada matriks identiti Kemudian jalankan transform()