<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

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.