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