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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let 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.
