HTML Canvas viittausopas

HTML Canvas viittausopas

HTML <canvas>-elementti käytetään grafiikan dynaamiseen piirtämiseen skriptin avulla (yleensä JavaScriptillä).

Lisätietoja HTML <canvas>-elementistä löydät HTML Canvas -oppaaltamme.

Värit, tyylit ja varjot

ominaisuus kuvaus
fillStyle Aseta tai palauta täytölle käytettävä väri, väriäsiirto tai kuviomalli
strokeStyle Aseta tai palauta varjolle käytettävä väri, väriäsiirto tai kuviomalli
shadowColor Aseta tai palauta varjon väri
shadowBlur Aseta tai palauta varjojen hämärtymisaste
shadowOffsetX Aseta tai palauta varjonsaannin horisontaalinen etäisyys muodosta
shadowOffsetY Aseta tai palauta varjonsaannin pystysuuntainen etäisyys muodosta
menetelmä kuvaus
createLinearGradient() Luo lineaarinen väriäsiirto (käytetään taulukkeen sisällössä)
createPattern() Toista määritetty elementti annetussa suunnassa
createRadialGradient() Luo säteellinen/kaareva väriäsiirto (käytetään taulukkeen sisällössä)
addColorStop() Määritä värit ja pysähtymispaikat väriäsiirto-objektissa

Viivatyylejä

ominaisuus kuvaus
lineCap Aseta tai palauta viivan lopun tyyli
lineJoin Aseta tai palauta kahden viivan risteytyessä luodun kulman tyyppi
lineWidth Aseta tai palauta nykyisen viivan leveys
miterLimit Aseta tai palauta suurin liitoskaaren pituus

Suorakulmio

menetelmä kuvaus
rect() Luo suorakulmio
fillRect() Piirrä 'täytetty' suorakulmio
strokeRect() Piirrä suorakulmio (ei täyttöä)
clearRect() Tyhjennä määritetyt pikselit annetussa suorakulmiossa

Polku

menetelmä kuvaus
fill() Täytä nykyinen piirto (polku)
stroke() Piirrä määritetty polku
beginPath() Aloita uusi polku tai nollaa nykyinen polku
moveTo() Siirrä polku taulukkeen määritettyyn pisteeseen ilman viivan luomista
closePath() Luo polku, joka palaa alkuperäiseen pisteeseen
lineTo() Lisää uusi piste ja luo viiva taulukkeessa tästä pisteestä viimeiseen määritettyyn pisteeseen
clip() Leikkaa minkä tahansa muodon ja kohteen alue alkuperäisestä taulukkeesta
quadraticCurveTo() Luo kaksinkertainen Bezier-kurvi
bezierCurveTo() Luo kolmikulmainen Bezier-kurvi
arc() Luo kaari/kurvi (käytetään pyörien tai osioiden luomiseen)
arcTo() Luo kahden tangentin välinen kaari/kurvi
isPointInPath() Jos määritetty kohta sijaitsee nykyisessä polussa, palauttaa true, muuten false

muunnos

menetelmä kuvaus
scale() Kasvattaa tai pienentää nykyistä piirtämistä suuremmaksi tai pienemmäksi
rotate() Kiertää nykyistä piirtämistä
translate() Uudelleenkarttaa luojaan (0,0) sijainnin
transform() Korvaa piirtämisen nykyinen muunnosmatriisi
setTransform() Nostaa nykyisen muunnoksen yhdenmuotoiseen matriisiin. Sitten suorita transform()

teksti

ominaisuus kuvaus
font Asettaa tai palauttaa tekstin sisällön nykyisen kirjasinkoon ominaisuuden
textAlign Asettaa tai palauttaa tekstin sisällön nykyisen tasauksen
textBaseline Asettaa tai palauttaa nykyisen tekstin piirtämisen käyttämän nykyisen tekstin peruslinjan
menetelmä kuvaus
fillText() Piirrä 'täytetty' teksti luojaan
strokeText() Piirrä teksti luojaan (ei täyttöä)
measureText() Palauttaa objektin, joka sisältää määritetyn tekstin leveyden

kuva piirtäminen

menetelmä kuvaus
drawImage() Piirrä kuva, luoja tai video luojaan

pikselinhallinta

ominaisuus kuvaus
width Palauttaa ImageData-objektin leveyden
height Palauttaa ImageData-objektin korkeuden
data Palauttaa objektin, joka sisältää määritetyn ImageData-objektin kuvatiedot
menetelmä kuvaus
createImageData() Luo uuden, tyhjän ImageData-objektin
getImageData() Palauttaa ImageData-objektin, joka kopioi määritetyn ruudukkoon kuvaan
putImageData() Palauttaa kuvatiedot (määritetystä ImageData-objektista) takaisin luojaan

yhdistäminen

ominaisuus kuvaus
globalAlpha Asettaa tai palauttaa piirtämisen nykyisen alpha- tai läpinäkyvyysarvon
globalCompositeOperation Asettaa tai palauttaa uuden kuvan piirtämisen olemassa olevaan kuvaan

muut

menetelmä kuvaus
save() Tallentaa nykyisen ympäristön tilan
restore() Palauttaa aikaisemmin tallennetun polun tilan ja ominaisuudet
createEvent() 　
getContext() 　
toDataURL()