[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.fillStyle

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Przykłady:

// html
<canvas id="canvas"></canvas>

// javascript, uzyskać odwołanie do elementu canvas, CanvasRenderingContext2D korzystając z canvas właściwości
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue"; // kolor wypełnienia prostokąta
ctx.fillRect(5, 5, 45, 45);

// html
<canvas id="canvas"></canvas>

// javascript, uzyskać odwołanie do elementu canvas, CanvasRenderingContext2D korzystając z canvas właściwości
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// wypełnienia za pomocą pętli
for (let i = 0; i < 5; i++) {
 for (let j = 0; j < 5; j++) {
 ctx.fillStyle = `rgb(
 ${Math.floor(255 - 42.5 * i)},
 ${Math.floor(255 - 42.5 * j)},
 0)`;
 ctx.fillRect(j * 25, i * 25, 25, 25);
 }
}

Opis:
Właściwość CanvasRenderingContext2D.fillStyle określa kolor, gradient lub wzór do użycia wewnątrz kształtów. Domyślny styl to #000 czarny. Wartość to jeden z następujących: ciąg znaków przeanalizowany jako <color> wartość CSS, obiekt CanvasGradient gradient liniowy lub promieniowy, obiekt CanvasPattern powtarzający się obraz.

Zobacz też:
Interfejs CanvasGradient -
Interfejs CanvasPattern -