HTML Canvas Reference Håndbog

HTML Canvas Reference Håndbog

HTML <canvas> tag bruges til dynamisk at tegne grafik med script (normalt JavaScript).

For mere information om <canvas>, læs vores HTML Canvas vejledning.

Farve, stil og skygge

egenskab beskrivelse
fillStyle Indstil eller returner farve, farvegrad eller mønster for fyldning
strokeStyle Indstil eller returner farve, farvegrad eller mønster for pen
shadowColor Indstil eller returner skyggens farve
shadowBlur Indstil eller returner skyggens blødhed
shadowOffsetX Indstil eller returner den horisontale afstand til skyggen fra former
shadowOffsetY Indstil eller returner den vertikale afstand til skyggen fra former
metode beskrivelse
createLinearGradient() Opret en lineær farvegrad (brugt på malindhold)
createPattern() G gentag specifikke elementer i en bestemt retning
createRadialGradient() Opret en radial eller cirkulær farvegrad (brugt på malindhold)
addColorStop() Definer farve og stopposition i en farvegrad

Linjestil

egenskab beskrivelse
lineCap Indstil eller returner stilen for linjens afsluttende ende
lineJoin Indstil eller returner typen af kant, der oprettes, når to linjer krydser
lineWidth Indstil eller returner den nuværende linjestyrke
miterLimit Indstil eller returner den maksimale skråningslængde

Rektangel

metode beskrivelse
rect() Opret en rektangel
fillRect() Tegn en 'fyldt' rektangel
strokeRect() Tegn en rektangel (uden fyldning)
clearRect() Fjern specifikke pixels inden for en givet rektangel

Sti

metode beskrivelse
fill() Fyld den nuværende tegning (sti)
stroke() Tegne en defineret sti
beginPath() Begynd en ny sti eller nulstil den nuværende sti
moveTo() Flyt stien til en bestemt punkt på malen uden at oprette en linje
closePath() Opret en sti fra den nuværende punkt til den oprindelige punkt
lineTo() Tilføj en ny punkt og opret en linje fra denne punkt til den sidst definerede punkt på malen
clip() Klippe en bestemt form og størrelse fra den oprindelige mal
quadraticCurveTo() opret en kvadratisk bezierkurve
bezierCurveTo() opret en tredjestreges bezierkurve
arc() opret en bue/kurve (bruges til at oprette cirkler eller dele af cirkler)
arcTo() opret en bue/kurve mellem to tangenter
isPointInPath() returner true, hvis den specificerede punkt er i den nuværende sti, ellers returner false

transformering

metode beskrivelse
scale() skaler den nuværende tegning til større eller mindre
rotate() rotér den nuværende tegning
translate() genmapp et (0,0) position på canvaset
transform() erstat den nuværende tegningstransformation
setTransform() nulstil den nuværende transformation til enhedsmatricen. Kør derefter transform()

tekst

egenskab beskrivelse
font indstil eller returner de nuværende skrifttypeegenskaber for tekstindhold
textAlign indstil eller returner den nuværende justering af tekstindhold
textBaseline indstil eller returner den nuværende tekstbase-linje, der bruges til tegning
metode beskrivelse
fillText() tegnet
strokeText() tegnet tekst på canvaset (uden fyldning)
measureText() returner et objekt, der indeholder den specificerede tekstbredde

billedtegning

metode beskrivelse
drawImage() tegnet et billede, canvas eller video på canvaset

pixeloperationer

egenskab beskrivelse
bredde returner bredden på ImageData-objektet
højde returner højden på ImageData-objektet
data returner et objekt, der indeholder billeddata for det specificerede ImageData-objekt
metode beskrivelse
createImageData() opret et nyt, tomt ImageData-objekt
getImageData() returner et ImageData-objekt, der indeholder billeddata for den specificerede rektangel på canvaset
putImageData() sæt billeddata (fra den specificerede ImageData-objekt) tilbage på canvaset

synkronisering

egenskab beskrivelse
globalAlpha indstil eller returner den nuværende alpha eller gennemsigtighedsværdi for tegning
globalCompositeOperation indstil eller returner, hvordan et nyt billede tegnes på et eksisterende billede

andre

metode beskrivelse
gem gem nuværende miljøets tilstand
genværdi tilbage til tidligere gemte stier og egenskaber
createEvent() 　
getContext() 　
toDataURL()