<canvas> fillStyle og strokeStyle - JavaScript

Vælg farve til det som skal tegnes på <canvas> med JavaScript fillStyle og strokeStyle attributter

Introduktion

fillStyle er farven som bruges til at udfylde figuren.
strokeStyle er farven som bruges på linjen omkring figuren.

Standard værdien for både fillStyle og strokeStyle er #000000 hvilket er sort.

Hexadecimale værdier

Farver kan angives med RGB hexadecimale værdier.
Værdien starter med et #-tegn for at angive at det efterfølgende er en hexadecimal værdi også 6 tegn i alt (2 tegn for hver farve, rød, grøn, blå).
Tegnene er 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (16 i alt).
Jo højere værdi man bruger til hver farve jo mere lys bliver farven.
#FF0000 betyder rød = 100%, grøn = 0%, blå = 0%.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Hexadecimale værdier 3 tegn

Der findes en kortere måde at skrive hexadecimale værdier på hvor der bruges 3 tegn i stedet for 6 tegn.
Det giver et mindre antal farver at vælge imellem men det er hurtigere at skrive og redigere.
#f00 svarer til at skrive #ff0000.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Farvenavne

Farvenavne som red, lime, pink, brown kan bruges ligesom man kender fra CSS.

createPattern

Man kan også bruge en billedfil i stedet for en farve.
Det kan for eksempel bruges til fliselægge et billede på hele baggrunden.

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.