Contoh
Menggambar persegi panjang. Gunakan warna stroke merah:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| strokeStyle | iya nih | 9.0 | iya nih | iya nih | iya nih |
Definisi dan Penggunaan
The strokeStyle set properti atau mengembalikan warna, gradien, atau pola yang digunakan untuk stroke.
| nilai default: | # 000000 |
|---|---|
| sintaks JavaScript: | context.strokeStyle=color|gradient|pattern; |
Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| color | Sebuah nilai warna CSS yang menunjukkan warna stroke gambarnya. Nilai default adalah #000000 | Mainkan " |
| gradient | Sebuah objek gradien ( linear atau radial ) yang digunakan untuk membuat stroke gradien | |
| pattern | Sebuah pattern objek yang digunakan untuk membuat stroke pola |
Contoh lebih
Contoh
Menggambar persegi panjang. Gunakan stroke gradien:
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);
Cobalah sendiri " Contoh
Menulis teks "Big smile!" , Dengan stroke gradien:
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);
Cobalah sendiri "