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