CanvasRenderingContext2D.fillStyle

Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

La proprietà CanvasRenderingContext2D.fillStyle delle Canvas 2D API specifica il colore o lo stile da usare all'interno delle forme. Il colore preimpostato è #000 (nero).

Vedi anche i capitoli Applicare stili e colori nel Canvas Tutorial.

Sintassi

ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;

Opzioni

color
Una DOMString letta come valore CSS <color>.
gradient
Un oggetto CanvasGradient (gradiente lineare o radiale).
pattern
Un oggetto CanvasPattern (immagine ripetuta).

Esempi

Usare la proprietà fillStyle per impostare un colore diverso

In questa semplice porzione di codice viene usata la proprietù fillStyle per impostare un colore diverso.

HTML

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

Modifica il codice qui sotto e vedi i cambiamenti in tempo reale nel canvas:

Un esempio di fillStyle con i cicli for

In questo esempio, useremo due cicli for per disegnare una griglia di rettangoli, ognuno di un colore differente. Il risultato finale dovrebbe assomigliare allo screenshot. Niente di particolarmente spettacolare. Usiamo due variabili ij per generare un colore RGB unico per ogni quadrato, questo modificando soltanto i valori del rosso e del verde. Il canale del blu ha un valore fisso. Modificando i canali, puoi generare ogni tipo di palette. Aumentando le ripetizioni del ciclo, puoi ottenere qualcosa di assomigliante alle palette usate da Photoshop.

var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
  for (var j=0;j<6;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);
  }
}

Il risultato assomiglia a questo:

ScreenshotLive sample

Specifiche

Specifiche Stato Commento
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.fillStyle' in that specification.
Living Standard  

Compatibilità dei Browser

Caratteristica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Caratteristica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
  • Nei browser basati su WebKit e Blink, un metodo non standard e deprecato ctx.setFillColor() è implementato oltre a queste proprietà.
    setFillColor(color, optional alpha);
    setFillColor(grayLevel, optional alpha);
    setFillColor(r, g, b, a);
    setFillColor(c, m, y, k, a);
    

Vedi anche

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: Sebastianz, teoli, Lucarnosky
 Ultima modifica di: Sebastianz,