JavaScript-da canvas-da chiziq rangini o'zgartirish

Keling, endi kontur va to'ldirish rangini o'zgartirishni o'rganamiz. Buning uchun quyidagi xususiyatlar mavjud: strokeStyle xususiyati kontur rangini belgilaydi, fillStyle xususiyati esa to'ldirish rangini belgilaydi. Ranglar odatdagi CSS formatida belgilanadi.

Misol

Keling, rect yordamida kontur chizamiz va uni qizil rangga bo'yaymiz:

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

Результат:

Misol

Keling, rect yordamida kvadrat chizamiz va uni yashil rangga bo'yaymiz:

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

Результат:

E'tibor bering

Muhim: strokeStyle yoki fillStyle ni o'rnatganingizda, yangi qiymat shu andan boshlab chiziladigan barcha shakllar uchun qo'llaniladi. Boshqa rang kerak bo'lgan har bir shakl uchun siz fillStyle yoki strokeStyle qiymatini qayta o'rnatishingiz kerak.

Amaliy vazifalar