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:
<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();
:
Pavyzdys
Nupieškime kvadratėlį naudodami rect
ir nuspalvinkime jį žaliai:
<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();
:
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.
