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 արժեքը:
