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