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:
<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();
:
Nümunə
Gəlin rect ilə bir kvadrat çəkək
və onu yaşıl rəngə boyayaq:
<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();
:
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.
