tutorial pengembangan web terbaru
 

HTML canvas strokeStyle Propery

<Canvas Object

Contoh

Menggambar persegi panjang. Gunakan warna stroke merah:

YourbrowserdoesnotsupporttheHTML5canvastag.

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

Contoh lebih

Contoh

Menggambar persegi panjang. Gunakan stroke gradien:

YourbrowserdoesnotsupporttheHTML5canvastag.

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

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