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:

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();

Результат:

Shembull

Le të vizatojmë një katror duke përdorur rect dhe ta mbushim me ngjyrë të gjelbër:

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();

Результат:

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.

Detyra praktike