JavaScript'de canvas-da çyzyň reňkini üýtgetmek
Indi konturyň we dolduryşyň reňkini üýtgetmegi öwreneliň.
Bunun üçin aşakdaky häsiýetler bar:
strokeStyle häsiýeti konturyň reňkini belgileýär,
fillStyle häsiýeti bolsa dolduryşyň reňkini belgileýär.
Reňkler adaty
CSS
formatynda bellik edilýär.
Mysal
rect ulanyp kontur çyzalyň we ony gyzyl reňke boýalyň:
<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();
:
Mysal
rect ulanyp inedördül çyzalyň we ony ýaşyl reňge boýalyň:
<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();
:
Bellik
Möhüm: Siz strokeStyle ýa-da fillStyle
häsiýetini belgileňizde, täze baha şu wagtadan başlap çyzyljak
bolan ähli şekiller üçin ulanyljak.
Başga reňk gerek bolan her bir şekil üçin siz
fillStyle ýa-da strokeStyle bahasyny täzeden ýazmaly.
