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 қийматини қайта ёзишингиз керак.
