JavaScript-те canvas-та сызық түсін өзгерту

Енді контур мен мөлдірлеу түстерін өзгертуді үйренейік. Бұл үшін мынадай қасиеттер бар: 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 мәнін қайта жазуыңыз керек.

Практикалық тапсырмалар