Atribut strokeStyle Canvas

Panduan Referensi Canvas

Definisi dan penggunaan

strokeStyle Atur atau kembalikan warna, gradasi, atau pattern untuk tinta.

Contoh

Contoh 1

Gambar sebuah lingkaran. Gunakan warna tinta biru:

Browser Anda tidak mendukung tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);

Coba sendiri

Sintaks

context.strokeStyle=color|gradient|pattern;

Nilai atribut

Nilai Deskripsi
color Menunjukkan warna tinta gambar Nilai warna CSS). Nilai standar adalah #000000.
gradient Objek gradasi untuk mengisi gambar (LinearatauRadio)
pattern Objek pattern untuk menciptakan tinta pattern.

Detil teknis

Nilai standar: #000000

Beberapa contoh lain

Contoh 2

Gambar sebuah lingkaran. Gunakan tinta gradasi:

Browser Anda tidak mendukung tag canvas.

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");
// Mengisi dengan gradasi
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

Coba sendiri

Contoh 3

Tulis teks "codew3c.com" dengan tinta gradasi:

Browser Anda tidak mendukung tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Membuat gradasi
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Mengisi dengan gradasi
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.

Panduan Referensi Canvas