Ранги хат дар 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-ро аз нависед.

Масъалаҳои амалӣ