Atrybut fillStyle canvas HTML
Definicja i użycie
fillStyle
Atrybut ustawiający lub zwracający kolor, gradient lub wzór używany do wypełnienia rysunku.
Przykład
Przykład 1
Zdefiniowanie prostokąta wypełnionego niebieskim kolorem:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#0000ff"; ctx.fillRect(20,20,150,100);
Wskazówka:Więcej przykładów znajduje się na dole strony.
Gramatyka
context.fillStyle=color|gradient|pattern;
Wartość atrybutu
Wartość | Opis |
---|---|
color | Indykuje kolor wypełnienia rysunku Wartości kolorów CSS.Domyślna wartość to #000000. |
gradient | Obiekt przejścia używany do wypełnienia rysunku (LiniowylubRadiacyjny) |
pattern | Obiekt wzoru używany do wypełnienia rysunku |
Szczegóły techniczne
Domyślna wartość: | #000000 |
---|
Więcej przykładów
Przykład 2
Zdefiniowanie przejścia z górnego na dolny jako styl wypełnienia prostokąta:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
Przykład 3
Zdefiniowanie przejścia z lewego na prawe jako styl wypełnienia prostokąta:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
Przykład 4
Zdefiniowanie przejścia z czarnego na czerwony na biały jako styl wypełnienia prostokąta:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(0.5,"red"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
Przykład 5
Używane obrazy:

Użycie obrazu do wypełnienia rysunku:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill();
Obsługa przeglądarek
Numer w tabeli oznacza pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Uwaga:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.