Ndryshimi i ngjyrës së vijës në canvas në JavaScript
Tani le të mësojmë se si të ndryshojmë ngjyrën e konturit
dhe mbushjes. Për këtë ekzistojnë vetitë e mëposhtme:
vetia strokeStyle vendos
ngjyrën e konturit, ndërsa vetia fillStyle
- ngjyrën e mbushjes. Ngjyrat vendosen në
formatin
e zakonshëm CSS.
Shembull
Le të vizatojmë një kontur duke përdorur rect
dhe ta ngjyrosim atë në të kuqe:
<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();
:
Shembull
Le të vizatojmë një katror duke përdorur rect
dhe ta mbushim me ngjyrë të gjelbër:
<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();
:
Vërejtje
E rëndësishme: kur vendosni strokeStyle
ose fillStyle, vlera e re do të zbatohet
për të gjitha format që do të vizatohen
prej këtij momenti. Për çdo formë, për të cilën
ju nevojitet një ngjyrë tjetër, duhet të rivendosni
vlerën fillStyle ose strokeStyle.
