Промена боје линије у 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.
