Örnek
bir dikdörtgen çizin. kırmızı bir vuruş renk kullanın:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
Kendin dene " Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| strokeStyle | Evet | 9.0 | Evet | Evet | Evet |
Tanımı ve Kullanımı
strokeStyle özelliği, ayarlar veya vuruş için kullanılan renk, gradyan veya desen döndürür.
| Varsayılan değer: | # 000000 |
|---|---|
| JavaScript sözdizimi: | context .strokeStyle= color | gradient | pattern ; |
Mülkiyet Değerler
| değer | Açıklama | Oynat |
|---|---|---|
| color | Bir CSS renk değeri çekme stroku rengini belirtir. Varsayılan değer #000000 | Oynat " |
| gradient | Bir gradyan nesnesi ( linear ya da radial ) bir gradyan kontur oluşturmak için kullanılan | |
| pattern | Bir pattern amacı, bir model kontur oluşturmak için kullanılan |
Diğer Örnekler
Örnek
bir dikdörtgen çizin. Bir gradyan felç kullanın:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
Kendin dene " Örnek
Metin yazın "Big smile!" Bir gradyan inmeli:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
Kendin dene "