Canvasда JavaScriptда чизиқ рангини ўзгартириш

Энди контур ва тўлдириш рангини ўзгартиришни ўрганамиз. Бунинг учун куйидаги хоссалар мавжуд: 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 қийматини қайта ёзишингиз керак.

Амалий машқлар