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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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 pola 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 " <Canvas Object