CanvasRenderingContext2D.fillStyle

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:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

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 i e j 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.

<canvas id="canvas" width="150" height="150"></canvas>

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:

Screenshot	Live sample

Specifiche

Compatibilità dei Browser

WebKit/Blink note specifiche

• 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

• Come definire l'interfaccia, CanvasRenderingContext2D
• CanvasGradient
• CanvasPattern