JavaScript'те canvas'те сызыктын түсүн өзгөртүү

Эми контурдун жана толтуруунун түсүн өзгөртүүнү үйрөнөлү. Бул үчүн төмөнкү касиеттер бар: 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 маанисин кайра жазууңуз керек.

Практикалык тапшырмалар