JavaScript-də canvas-da xətt rənginin dəyişdirilməsi

Gəlin indi kontur və doldurma rəngini dəyişdirməyi öyrənək. Bunun üçün aşağıdakı xassələr var: strokeStyle xassəsi konturun rəngini təyin edir, fillStyle xassəsi isə doldurmanın rəngini təyin edir. Rənglər adi CSS formatında təyin olunur.

Nümunə

Gəlin rect ilə bir kontur çəkək və onu qırmızı rəngə boyayaq:

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

Результат:

Nümunə

Gəlin rect ilə bir kvadrat çəkək və onu yaşıl rəngə boyayaq:

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

Результат:

Qeyd

Vacibdir: strokeStyle və ya fillStyle təyin etdiyiniz zaman, yeni dəyər bundan sonra çəkiləcək bütün fiqurlara şamil olunacaq. Başqa rəngə ehtiyacı olan hər bir fiqur üçün fillStyle və ya strokeStyle dəyərini yenidən təyin etməlisiniz.

Praktiki tapşırıqlar