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ň:

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

Результат:

Mysal

rect ulanyp inedördül çyzalyň we ony ýaşyl reňge boýalyň:

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

Результат:

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.

Amaly wezîpeler