tutorial pengembangan web terbaru
 

HTML Canvas Referensi


Deskripsi

HTML5 <canvas> tag digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript).

Namun, <canvas> elemen tidak memiliki kemampuan menggambar sendiri (hanya wadah untuk grafis) - Anda harus menggunakan script untuk benar-benar menarik grafis.

The getContext() metode mengembalikan sebuah objek yang menyediakan metode dan properti untuk menggambar di kanvas.

Referensi ini akan mencakup properti dan metode dari getContext("2d") objek, yang dapat digunakan untuk menggambar teks, garis, kotak, lingkaran, dan banyak lagi - di kanvas.


Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung elemen.

Elemen
<canvas> 4.0 9.0 2.0 3.1 9.0

Internet Explorer 9, Firefox, Opera, Chrome, dan dukungan Safari <canvas> dan sifat-sifatnya dan metode.

Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung <canvas> elemen.


Warna, Styles, dan Shadows

Milik Deskripsi
fillStyle Set atau mengembalikan warna, gradien, atau pola yang digunakan untuk mengisi gambar
strokeStyle Set atau mengembalikan warna, gradien, atau pola yang digunakan untuk stroke
shadowColor Menetapkan atau mengembalikan warna yang akan digunakan untuk bayangan
shadowBlur Menetapkan atau mengembalikan tingkat blur untuk bayangan
shadowOffsetX Menetapkan atau mengembalikan jarak horizontal bayangan dari bentuk
shadowOffsetY Menetapkan atau mengembalikan jarak vertikal dari bayangan dari bentuk

metode Deskripsi
createLinearGradient() Menciptakan gradien linier (untuk digunakan pada konten kanvas)
createPattern() Mengulangi elemen tertentu dalam arah yang ditentukan
createRadialGradient() Menciptakan radial / melingkar gradien (untuk digunakan pada konten kanvas)
addColorStop() Menentukan warna dan menghentikan posisi dalam sebuah objek gradien

Styles baris

Milik Deskripsi
lineCap Menetapkan atau mengembalikan gaya topi akhir untuk garis
lineJoin Set atau mengembalikan jenis sudut dibuat, ketika dua garis bertemu
lineWidth Menetapkan atau mengembalikan garis lebar saat
miterLimit Menetapkan atau mengembalikan panjang mitra maksimum

persegi panjang

metode Deskripsi
rect() Menciptakan sebuah persegi panjang
fillRect() Menggambar "diisi" persegi panjang
strokeRect() Menggambar persegi panjang (tanpa isi)
clearRect() Membersihkan piksel tertentu dalam sebuah persegi panjang yang diberikan

jalur

metode Deskripsi
fill() Mengisi gambar saat (jalan)
stroke() Sebenarnya menarik jalur yang telah Anda tetapkan
beginPath() Dimulai jalan, atau me-reset jalan saat
moveTo() Bergerak jalan ke titik yang ditentukan dalam kanvas, tanpa menciptakan garis
closePath() Menciptakan jalan dari titik saat kembali ke titik awal
lineTo() Menambahkan titik baru dan menciptakan garis ke titik itu dari titik yang ditentukan terakhir di kanvas
clip() Klip daerah dari setiap bentuk dan ukuran dari kanvas asli
quadraticCurveTo() Menciptakan kurva Bezier kuadrat
bezierCurveTo() Menciptakan kurva Bezier kubik
arc() Menciptakan busur / kurva (digunakan untuk membuat lingkaran, atau bagian dari lingkaran)
arcTo() Menciptakan busur / kurva antara dua garis singgung
isPointInPath() Mengembalikan true jika titik tertentu di jalan saat ini, dinyatakan palsu

transformasi

metode Deskripsi
scale() Timbangan gambar saat besar atau lebih kecil
rotate() Memutar gambar saat ini
translate() Remaps (0,0) posisi di kanvas
transform() Menggantikan matriks transformasi saat ini untuk gambar
setTransform() Reset mengubah arus ke matriks identitas. Kemudian berjalan transform ()

Teks

Milik Deskripsi
font Menetapkan atau mengembalikan properti font saat ini untuk konten teks
textAlign Menetapkan atau mengembalikan keselarasan saat ini untuk konten teks
textBaseline Set atau kembali teks dasar saat ini digunakan ketika menggambar teks

metode Deskripsi
fillText() Menarik teks "diisi" di kanvas
strokeText() Menarik teks pada kanvas (tanpa isi)
measureText() Mengembalikan sebuah objek yang berisi lebar teks tertentu

gambar Menggambar

metode Deskripsi
drawImage() Menarik gambar, kanvas, atau video ke kanvas

pixel Manipulasi

Milik Deskripsi
width Mengembalikan lebar obyek imageData
height Mengembalikan ketinggian obyek imageData
data Mengembalikan sebuah objek yang berisi data gambar dari objek imageData ditentukan

metode Deskripsi
createImageData() Membuat baru, kosong objek imageData
getImageData() Mengembalikan sebuah objek imageData yang salinan data pixel untuk persegi panjang yang ditentukan di atas kanvas
putImageData() Menempatkan data gambar (dari benda imageData tertentu) kembali ke kanvas

compositing

Milik Deskripsi
globalAlpha Menetapkan atau mengembalikan alpha atau transparansi nilai saat ini dari gambar
globalCompositeOperation Set atau kembali bagaimana gambar baru ditarik ke gambar yang ada

Lain

metode Deskripsi
save() Menyimpan keadaan konteks saat ini
restore() Pengembalian negara path disimpan sebelumnya dan atribut
createEvent()
getContext()
toDataURL()