HTML Canvas Reference Manual
HTML Canvas Reference Manual
De HTML <canvas>-tag wordt gebruikt om grafieken dynamisch te tekenen via script (meestal JavaScript).
Voor meer informatie over <canvas>, lees onze HTML Canvas-tutorial.
Kleur, stijl en schaduw
| Eigenschappen |
Beschrijving |
| fillStyle |
Stel in of retourneer de kleur, het verloop of het patroon van de vulling |
| strokeStyle |
Stel in of retourneer de kleur, het verloop of het patroon van de pen |
| shadowColor |
Stel in of retourneer de kleur van de schaduw |
| shadowBlur |
Stel in of retourneer het schaduwzwaarte |
| shadowOffsetX |
Stel in of retourneer de horizontale afstand van de schaduw van de vorm |
| shadowOffsetY |
Stel in of retourneer de verticale afstand van de schaduw van de vorm |
Lijnstijl
| Eigenschappen |
Beschrijving |
| lineCap |
Stel in of retourneer het einde van de lijnstijl |
| lineJoin |
Stel in of retourneer het type hoek die wordt gecreëerd wanneer twee lijnen kruisen |
| lineWidth |
Stel in of retourneer de huidige lijnhoogte |
| miterLimit |
Stel in of retourneer de maximale schuine lengte |
Rechthoek
| Methode |
Beschrijving |
| rect() |
Maak een rechthoek |
| fillRect() |
Teken een 'gevulde' rechthoek |
| strokeRect() |
Teken een rechthoek (zonder invulling) |
| clearRect() |
Wis de opgegeven pixels in het gegeven rechthoek |
Pad
| Methode |
Beschrijving |
| fill() |
Vul het huidige tekenen (pad) in |
| stroke() |
Teken een gedefinieerd pad |
| beginPath() |
Begin een pad of reset het huidige pad |
| moveTo() |
Verplaats het pad naar een opgegeven punt op het canvas zonder een lijn te maken |
| closePath() |
Maak een pad dat van de huidige punt terug naar het beginpunt gaat |
| lineTo() |
Voeg een nieuwe punt toe en maak een lijn van dat punt naar het laatste opgegeven punt op het canvas |
| clip() |
Knip een willekeurige vorm en maat van een gebied van de oorspronkelijke canvas |
| quadraticCurveTo() |
Maak een quadratische Bezier-curve |
| bezierCurveTo() |
Maak een cubische Bezier-curve |
| arc() |
Maak een boog of curve (gebruikt om cirkels of gedeelten ervan te maken) |
| arcTo() |
Maak een boog of curve tussen twee tangentlijnen |
| isPointInPath() |
Geef true terug als het opgegeven punt zich in het huidige pad bevindt, anders false |
Transformatie
| Methode |
Beschrijving |
| scale() |
Zoom het huidige tekenen in of uit |
| rotate() |
Rooster het huidige tekenen |
| translate() |
Herdefinieer de positie (0,0) op het canvas |
| transform() |
Vervang de huidige transformatiematrix van het tekenen |
| setTransform() |
Zet de huidige conversie terug naar een eenheidsmatrix. Voer vervolgens transform() uit |
Tekst
| Eigenschappen |
Beschrijving |
| font |
Stel in of geef terug de huidige lettertype-eigenschappen van de tekstinhoud |
| textAlign |
Stel in of geef terug de huidige uitlijning van de tekstinhoud |
| textBaseline |
Stel in of geef terug de huidige tekstbaselijn bij het tekenen |
| Methode |
Beschrijving |
| fillText() |
Teken 'gevulde' tekst op het canvas |
| strokeText() |
Teken tekst op het canvas (zonder vulling) |
| measureText() |
Geef een object terug dat de breedte van de gespecificeerde tekst meet |
Beeldtekening
| Methode |
Beschrijving |
| drawImage() |
Teken een afbeelding, canvas of video op het canvas |
Pixelbewerkingen
| Eigenschappen |
Beschrijving |
| width |
Geef de breedte van het ImageData-object terug |
| height |
Geef de hoogte van het ImageData-object terug |
| data |
Geef een object terug dat de afbeeldingsgegevens van een specifieke ImageData-object bevat |
| Methode |
Beschrijving |
| createImageData() |
Maak een nieuwe, lege ImageData-object |
| getImageData() |
Geef een ImageData-object terug, dat de pixelgegevens van een specifieke rechthoek op het canvas kopieert |
| putImageData() |
Plaats de afbeeldingsgegevens (van het opgegeven ImageData-object) terug op het canvas |
Compositie
| Eigenschappen |
Beschrijving |
| globalAlpha |
Stel in of geef terug de huidige alpha of transparantie van het tekenen |
| globalCompositeOperation |
Stel in of geef terug hoe een nieuw beeld wordt getekend op een bestaand beeld |
Andere
| Methode |
Beschrijving |
| save() |
Sla de huidige omgevingstatus op |
| restore() |
Geef de eerder opgeslagen padstatus en eigenschappen terug |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
