<canvas> globalCompositeOperation - JavaScript

Med JavaScript globalCompositeOperation kan man bestemme hvordan det der tegne på <canvas> skal se ud afhængig af hvad der i forvejen er tegnet på <canvas>

Introduktion

Normalt når man tegner på <canvas> så tegnes der oven på det der i forvejen er tegnet.

globalCompositeOperation bruges til at bestemme hvad der skal ske med det der bliver tegnet og det der i forvejen er tegnet og kan være en af de følgende værdier.

  • source-over | source-in | source-out | source-atop |
  • destination-over | destination-in | destination-out | destination-atop |
  • lighter | copy | xor

Standardværdien for globalCompositeOperation er source-over.

Bemærk at værdien darker som tidligere var i speficikationen er blevet fjernet.
I Firefox er der darken (med n i stedet for r).

Eksempler

Her er en demo fra mozilla.org hvor der først tegnes en firkant også sættes globalCompositeOperation også tegnes en cirkel delvist oven på firkanten.











Resultatet ovenfor er skabt af følgende kode

Farver

Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Nye værdier

Fra Firefox 20.0 kan man også bruge følgende nye værdier.
  • normal | multiply | screen | overlay |
  • darken | lighten |
  • color-dodge | color-burn |
  • hard-light | soft-light |
  • difference | exclusion |
  • hue | saturation | color | luminosity

Værdierne virker ikke i nogen af de andre browsere jeg har prøvet.
Prøv i Firefox 20.0 og nyere
kat der sover polygon pige
Browseren understøtter ikke <canvas>
Hold markøren over knapperne for at skifte værdien af globalCompositeOperation





Resultatet ovenfor er skabt af følgende kode

<CANVAS> GLOBALCOMPOSITEOPERATION DEMO

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.