Skip to main content

Colors i transparències fillStyle i strokeStyle

Assolir els conceptes de fillStyle i strokeStyle és fonamental, ja que controlen l'aparença de tot el que dibuixis al Canvas. Són, essencialment, la paleta de colors i pinzells del teu context de dibuix.

ctx.fillStyle (Estil d'ompliment)

Aquesta propietat defineix l'estil (color, degradat o patró) que s'utilitzarà per omplir l'interior de les formes, com ara rectangles, cercles o text.

  • Mètodes que l'utilitzen: fillRect(), fill(), fillText().

ctx.strokeStyle (Estil de contorn)

Aquesta propietat defineix l'estil que s'utilitzarà per dibuixar el contorn o la vora de les formes o per dibuixar línies.

  • Mètodes que l'utilitzen: strokeRect(), stroke(), strokeText().

Funcionament

Tant fillStyle com strokeStyle funcionen com a configuracions persistents (o "estats"):

  1. Defineixes l'estil: Fas ctx.fillStyle = 'blue';

  2. Dibuixes: Totes les operacions d'fill() a partir d'aquest moment utilitzaran el blau.

  3. Canvies l'estil: Si fas ctx.fillStyle = 'red';

  4. Dibuixes de nou: Totes les operacions d'fill() posteriors utilitzaran el vermell.

El Canvas de JavaScript suporta una gran varietat de formats de color de la web.

Noms de colors i hexadecimals

Són els mètodes més bàsics i sense transparència per defecte (opacitat total).

Format Exemple Descripció
Nom ctx.fillStyle = 'orange'; Utilitza qualsevol nom de color estàndard CSS.
Hexadecimal ctx.strokeStyle = '#3CB371'; Utilitza un codi de 6 dígits (RGB).
Hexadecimal (curt) ctx.fillStyle = '#F00'; Codi curt (equivalent a #FF0000 per al vermell).

Colors RGB (amb transparència)

Aquest és el format més útil quan es vol controlar la transparència (o opacitat) de l'element.

Format Funció Descripció
RGB rgb(r, g, b) Color sense canal alfa (opacitat total).
RGBA rgba(r, g, b, a) Color amb canal alfa.

  • r, g, b: Valors entre 0 i 255 per a vermell, verd i blau.

  • a (Alpha): Valor entre 0.0 (totalment transparent) i 1.0 (totalment opac).

Exemple de Transparència:

JavaScript 
// Rectangle vermell semi-transparent (50% opacitat)
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(50, 50, 100, 100);

// Rectangle blau totalment opac

ctx.fillStyle = 'rgba(0, 0, 255, 1.0)';

ctx.fillRect(100, 100, 100, 100);

// Observa com el segon rectangle blau es barreja amb el primer on se superposen, gràcies a la transparència del vermell.

Transparència global: globalAlpha

Aquesta propietat és una configuració d'estat addicional que afecta la transparència de totes les operacions de dibuix posteriors al Canvas, independentment del valor alfa que hagis utilitzat a fillStyle o strokeStyle.

  • Valor: Entre 0.0 (totalment transparent) i 1.0 (opac).

Quan utilitzar globalAlpha: Quan vols dibuixar moltes formes amb la mateixa opacitat.

JavaScript 
ctx.globalAlpha = 0.3; // Totes les formes següents seran al 30% d'opacitat

ctx.fillStyle = 'yellow';

ctx.fillRect(200, 50, 50, 50); // Serà groc al 30% d'opacitat

ctx.strokeStyle = 'black';

ctx.strokeRect(200, 50, 50, 50); // El contorn també serà al 30% d'opacitat

ctx.globalAlpha = 1.0; // Torna a restablir l'opacitat total

Exemple

Aquí teniu un exemple que combina la configuració dels dos estils i la transparència:

HTML 
<canvas id="meuLienzo" width="400" height="200" style="background-color: #eee;"></canvas>

<script>
    const canvas = document.getElementById('meuLienzo');
    const ctx = canvas.getContext('2d');

    // === RECTANGLE 1: Colors explícits ===
    ctx.fillStyle = 'teal'; // Ompliment verd blau
    ctx.strokeStyle = '#8B0000'; // Contorn vermell fosc (Hex)
    ctx.lineWidth = 6;
    
    ctx.fillRect(20, 20, 100, 100); 
    ctx.strokeRect(20, 20, 100, 100);

    // === RECTANGLE 2: Transparència RGBA i Global ===
    
    // 1. Configuració d'opacitat del contorn al 40%
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)'; 
    ctx.lineWidth = 10;
    
    // 2. Configuració d'opacitat global al 80% (afecta TOT el dibuix)
    ctx.globalAlpha = 0.8; 

    // 3. Ompliment: tot i que només definim el color, l'opacitat real serà 0.8 * 1.0 = 0.8
    ctx.fillStyle = 'purple'; 
    
    ctx.fillRect(80, 80, 100, 100); 
    ctx.strokeRect(80, 80, 100, 100);

    // 4. Important: Restablir globalAlpha per a dibuixos futurs
    ctx.globalAlpha = 1.0; 
</script>

Back to top