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

Գործնական առաջադրանքներ