<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

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.