Canvas strokeStyle özelliği
Tanım ve kullanım
strokeStyle Özellik değeri, kalemin rengi, geçişi veya modelini ayarlar veya döndürür.
Örnek
Örnek 1
Bir dikdörtgen çizin. Mavi kalem rengi kullanarak:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
Sözdizimi
context.strokeStyle=color|gradient|pattern;
Özellik değeri
| Değer | Açıklama |
|---|---|
| color | Grafik kalemi rengini belirler CSS renk değeri）。Varsayılan değer #000000'dır. |
| gradient | Grafik doldurmak için kullanılan geçiş nesnesi（DaireselveyaRadyoaktif）。 |
| pattern | Pattern kalemi oluşturmak için kullanılan pattern nesnesi. |
Teknik ayrıntılar
| Varsayılan değer: | #000000 |
|---|
Daha fazla örnek
Örnek 2
Bir dikdörtgen çizin. Geçiş kalemi kullanarak:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","mor");
gradient.addColorStop("0.5","mavi");
gradient.addColorStop("1.0","kırmızı");
// Geçişle doldurma
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
Örnek 3
"codew3c.com" metnini bir geçiş kalemiyle yazın:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Geçiş oluşturma
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","mor");
gradient.addColorStop("0.5","mavi");
gradient.addColorStop("1.0","kırmızı");
// Geçişle doldurma
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
Tarayıcı desteği
Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.
