HTML Canvas ReferensManual
HTML Canvas ReferensManual
HTML <canvas>-tagget används för att dynamiskt rita grafik via skript (vanligtvis JavaScript).
För mer information om <canvas>, läs vår HTML Canvas-guide.
Färg, stil och skugga
| egenskaper |
beskrivning |
| fillStyle |
Ställ in eller returnera färgen, gradationen eller mönstret för fyllning |
| strokeStyle |
Ställ in eller returnera färgen, gradationen eller mönstret för penna |
| shadowColor |
Ställ in eller returnera färgen för skuggan |
| shadowBlur |
Ställ in eller returnera suddighetsnivån för skuggan |
| shadowOffsetX |
Ställ in eller returnera det horisontella avståndet från skuggan till formen |
| shadowOffsetY |
Ställ in eller returnera den vertikala avståndet från skuggan till formen |
Linjestil
| egenskaper |
beskrivning |
| lineCap |
Ställ in eller returnera stilen för linjens slutändar |
| lineJoin |
Ställ in eller returnera typen av hörn som skapas när två linjer möts |
| lineWidth |
Ställ in eller returnera den aktuella linjebredden |
| miterLimit |
Ställ in eller returnera den maximala miters längden |
Bana
| metod |
beskrivning |
| fill() |
Fyll det aktuella ritandet (banan) |
| stroke() |
Rita den definierade banan |
| beginPath() |
Börja en ny bana eller återställ den aktuella banan |
| moveTo() |
Flytta banan till en specificerad punkt på canvasen utan att skapa en linje |
| closePath() |
Skapa en bana som går från den aktuella punkten till startpunkten |
| lineTo() |
Lägg till en ny punkt och skapa en linje från denna punkt till den sista specificerade punkten på canvasen |
| clip() |
Klipp ut ett område av valfri form och storlek från den ursprungliga canvasen |
| quadraticCurveTo() |
skapa en kvadratisk Bezier-kurva |
| bezierCurveTo() |
skapa en tredjedels Bezier-kurva |
| arc() |
skapa en båge/cirkelkurva (används för att skapa cirklar eller delar av cirklar) |
| arcTo() |
skapa en båge/cirkelkurva mellan två tangentlinjer |
| isPointInPath() |
om den specificerade punkten ligger i den aktuella vägen, returnera true, annars returnera false |
transformering
| metod |
beskrivning |
| scale() |
skala den aktuella ritt till större eller mindre |
| rotate() |
rotera den aktuella ritt |
| translate() |
omvandla (0,0) positionen på canvas |
| transform() |
ersätt den aktuella transformationen för ritt |
| setTransform() |
återställ den aktuella transformationen till en enhetsmatris. Kör sedan transform() |
text
| egenskaper |
beskrivning |
| font |
ställa in eller återställa den aktuella typsnittsegenskapen för textinnehållet |
| textAlign |
ställa in eller återställa den aktuella justeringen för textinnehållet |
| textBaseline |
ställa in eller återställa den aktuella textbaslinjen för ritt |
| metod |
beskrivning |
| fillText() |
rita "fylld" text på canvas |
| strokeText() |
rita text på canvas (utan fyllning) |
| measureText() |
återställ ett objekt som innehåller den specificerade textens bredd |
bildritning
| metod |
beskrivning |
| drawImage() |
rita en bild, canvas eller video på canvas |
pixelhantering
| egenskaper |
beskrivning |
| width |
återställ bredden på ImageData-objektet |
| height |
återställ höjden på ImageData-objektet |
| data |
återställ ett objekt som innehåller bilddata för det specificerade ImageData-objektet |
| metod |
beskrivning |
| createImageData() |
skapa ett nytt, tomt ImageData-objekt |
| getImageData() |
återställ ImageData-objekt, som innehåller bilddata för den specificerade rektangeln på canvas |
| putImageData() |
lägg tillbaka bilddata (från den specifika ImageData-objektet) på canvas |
komposition
| egenskaper |
beskrivning |
| globalAlpha |
ställa in eller återställa den aktuella alfanivån eller genomskinligheten för ritt |
| globalCompositeOperation |
ställa in eller återställa hur ett nytt bild skall ritas på ett befintligt bild |
andra
| metod |
beskrivning |
| spara() |
spara aktuellt miljöstatus |
| återställ() |
återställ tidigare sparade vägstat och egenskaper |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
