Промена на бојата на линијата во canvas во JavaScript
Ајде сега да научиме како да ја промениме бојата на контурата
и пополнувањето. За ова постојат следните својства:
својството strokeStyle ја поставува
бојата на контурата, а својството fillStyle
- бојата на пополнувањето. Боите се поставуваат во обичен
CSS
формат.
Пример
Ајде да нацртаме контура со помош на rect
и да ја обојиме во црвена боја:
<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();
:
Пример
Ајде да нацртаме квадрат со помош на rect
и да го обојиме во зелена боја:
<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();
:
Забелешка
Важно: кога ќе поставите strokeStyle
или fillStyle, новата вредност ќе се примени
за сите фигури што ќе бидат нацртани
од овој момент. За секоја фигура, за која
ви треба друга боја, мора да ја презапишете
вредноста на fillStyle или strokeStyle.
