tutorial pengembangan web terbaru
 

HTML DOM Canvas Obyek

❮ Sebelumnya Berikutnya Referensi ❯

kanvas Obyek

Kanvas Obyek baru di HTML5.

HTML5 <canvas> tag digunakan untuk menggambar grafik, dengan cepat, dengan JavaScript.

Mengakses Object Canvas

Anda dapat mengakses <canvas> elemen dengan menggunakan getElementById() :

Contoh

var x = document.getElementById("myCanvas");
Cobalah sendiri "

Buat objek Canvas

Anda dapat membuat <canvas> elemen dengan menggunakan document. createElement() document. createElement() metode:

Contoh

var x = document.createElement("CANVAS");
Cobalah sendiri "

Catatan: <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.

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 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 (to use on canvas content)
createPattern() Mengulangi elemen yang ditentukan dalam arah tertentu
createRadialGradient() Menciptakan sebuah radial / melingkar gradien (to use on canvas content)
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 lebar garis saat ini
miterLimit Menetapkan atau mengembalikan panjang mitra maksimum

persegi panjang

metode Deskripsi
rect() Menciptakan persegi panjang
fillRect() Menggambar "filled" persegi panjang
strokeRect() Menggambar persegi panjang (no fill)
clearRect() Membersihkan piksel tertentu dalam persegi panjang yang diberikan

jalan

metode Deskripsi
fill() Mengisi gambar saat (path)
stroke() Sebenarnya menarik jalur yang telah Anda tetapkan
beginPath() Dimulai jalan, atau me-reset jalan saat ini
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 dari titik itu ke 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 (used to create circles, or parts of circles)
arcTo() Menciptakan busur / kurva antara dua garis singgung
isPointInPath() Mengembalikan nilai true jika titik yang ditentukan adalah di jalan saat ini, jika tidak 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() Mengatur ulang 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 "filled" teks pada kanvas
strokeText() Menarik teks pada kanvas (no fill)
measureText() Mengembalikan sebuah objek yang berisi lebar teks yang ditentukan

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 pada kanvas
putImageData() Menempatkan data gambar (from a specified ImageData object) 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()

Properti standar dan Acara

Objek kanvas juga mendukung standar sifat dan peristiwa .

Pages terkait

Tutorial HTML: HTML5 Canvas

Referensi HTML: HTML <canvas> tag


❮ Sebelumnya Berikutnya Referensi ❯