Linijos spalvos keitimas canvas'e naudojant JavaScript

Dabar išmokime keiti kontūro ir užpildo spalvas. Tam yra šios savybės: savybė strokeStyle nustato kontūro spalvą, o savybė fillStyle - užpildo spalvą. Spalvos nustatomos įprastu CSS formatu.

Pavyzdys

Nupieškime kontūrą naudodami rect ir nuspalvinkime jį raudonai:

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();

Результат:

Pavyzdys

Nupieškime kvadratėlį naudodami rect ir nuspalvinkime jį žaliai:

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();

Результат:

Pastaba

Svarbu: kai nustatote strokeStyle arba fillStyle, nauja reikšmė bus taikoma visoms figūroms, kurios bus nupieštos nuo šio momento. Kiekvienai figūrai, kuriai jums reikia kitos spalvos, turite perrašyti reikšmę fillStyle arba strokeStyle.

Praktinės užduotys