<canvas> Gradient - JavaScript

Tegn lineære og radiale gradients på <canvas> med JavaScript createLinearGradient(), createRadialGradient(), addColorStop()

Introduktion

En gradient er en farveovergang som løbende skifter farve.

Ligesom en solnedgang eller regnbuen.

I stedet for at bruge en farve som rød til at tegne en rød firkant så kan man bruge en gradient som farve og få en flot effekt fra rød til blå.

Syntax

Der findes 2 typer af gradients.
lineære og radiale.

En lineær gradient laves med createLinearGradient() og farven skifter fra et X-Y-punkt til et andet X-Y-punkt ligesom en streg.
En radial gradient laves med createRadialGradient() og farven skifter fra et midtpunkt og spreder sig ud ligesom en cirkel der vokser.

Efter gradienten er lavet bruges addColorStop() for at tilføje en farve til gradienten.
Man kan kalde addColorStop() flere gange for at tilføje flere farver.

Lineær gradient 1

Her bruges createLinearGradient() til at lave en lineær gradient fra øverste højre hjørne til nederste venstre hjørne på <canvas>.
Gradienten tilføjes 2 farver.
Derefter bruges gradienten som farve til at tegne en udfyldt firkant på canvas.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Lineær gradient 2

Her bruges createLinearGradient() til at lave nogen flere gradients med flere farver.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Der er tegnet 3 firkanter.

Først er hele canvas udfyldt med en udfyldt firkant der bruger en gradient som farve.
Så er der tegnet en stregfirkant med en anden gradient.
Og så er der tegnet en udfyldt firkant med en genbrugt gradient så man kan se gradienten ligesom står stille, den tilpasser sig ikke automatisk til firkantens størrelse som man måske ville forvente.

Radial gradient

Her har jeg lavet en fin sol ved at bruge createRadialGradient().
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Selvom det er en firkant vi tegner med fillRect() så kommer det til at ligne en cirkel fordi vi har lavet en radial gradient med createRadialGradient().

Tekst med gradient

Man man også bruge en gradient som farve på tekst.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode
Siden er sidst opdateret mandag 25. juni 2018