<canvas> save og restore - JavaScript

Gem og genskab tegnetilstande på <canvas> med JavaScript save() og restore()

Introduktion

save() gemmer de aktuelle indstillinger for : translate, rotate, scale, strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, clipping path.

Når save() kaldes gemmes indstillingerne i en "stack".



restore() henter tidligere gemte tegnetilstand.

Ved at bruge restore() flere gange henter man ældre og ældre tegnetilstande fra stacken.

Demo 1

Her tegnes 5 cirkler delvist oven på hinanden.
Ved de 3 første cirkler vælger vi farve med fillStyle.
Ved de 2 sidste cirkler vender vi tilbage til de tidligere brugte farver med restore.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode
Siden er sidst opdateret mandag 25. juni 2018