Промена на бојата на линијата во canvas во JavaScript

Ајде сега да научиме како да ја промениме бојата на контурата и пополнувањето. За ова постојат следните својства: својството strokeStyle ја поставува бојата на контурата, а својството fillStyle - бојата на пополнувањето. Боите се поставуваат во обичен CSS формат.

Пример

Ајде да нацртаме контура со помош на rect и да ја обојиме во црвена боја:

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

Результат:

Пример

Ајде да нацртаме квадрат со помош на rect и да го обојиме во зелена боја:

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

Результат:

Забелешка

Важно: кога ќе поставите strokeStyle или fillStyle, новата вредност ќе се примени за сите фигури што ќе бидат нацртани од овој момент. За секоја фигура, за која ви треба друга боја, мора да ја презапишете вредноста на fillStyle или strokeStyle.

Практични задачи