Vonal színének megváltoztatása canvas-ben JavaScript segítségével

Most pedig tanuljuk meg, hogyan változtathatjuk meg a körvonal és a kitöltés színét. Erre a következő tulajdonságok szolgálnak: a strokeStyle tulajdonság beállítja a körvonal színét, a fillStyle tulajdonság pedig a kitöltés színét. A színek a szokásos CSS formátumban adhatók meg.

Példa

Rajzoljunk egy körvonalat a rect segítségével és színezzük pirosra:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

Példa

Rajzoljunk egy négyzetet a rect segítségével és színezzük zöldre:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

Megjegyzés

Fontos: amikor beállítod a strokeStyle vagy a fillStyle értékét, az új érték minden attól a ponttól rajzolt alakzatra érvényes lesz. Minden olyan alakzathoz, amelyhez másik színre van szükséged, felül kell írnod a fillStyle vagy a strokeStyle értékét.

Gyakorlati feladatok