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:
<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();
:
Örnek
rect ile bir kare çizelim
ve onu yeşil renge boyayalım:
<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();
:
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.
