JavaScript'te Canvas Çizgi Rengini Değiştirme

Şimdi kontur rengini ve dolgu rengini değiştirmeyi öğrenelim. Bunun için şu özellikler vardır: strokeStyle özelliği kontur rengini ayarlar, fillStyle özelliği ise dolgu rengini ayarlar. Renkler normal CSS formatında ayarlanır.

Örnek

rect ile bir kontur çizelim ve onu kırmızı renge boyayalım:

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

Результат:

Örnek

rect ile bir kare çizelim ve onu yeşil renge boyayalım:

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

Результат:

Not

Önemli: strokeStyle veya fillStyle değerini ayarladığınızda, yeni değer bundan sonra çizilecek tüm şekiller için uygulanacaktır. Farklı bir renge ihtiyaç duyduğunuz her şekil için, fillStyle veya strokeStyle değerini tekrar ayarlamalısınız.

Pratik Görevler