ตัวแปร strokeStyle ของ canvas HTML

คู่มืออ้างอิง HTML5 Canvas

การเรียกใช้ และ ความหมาย

strokeStyle คำอธิบาย หรือ ค่าของตัวแปร

ตัวอย่าง

ตัวอย่าง 1

วาดเส้นทางตัวสี่เหลี่ยมผืนผ้า。ใช้สีสีสลับสีสดใส:

เว็บเบราว์เซอร์ของคุณไม่สนับสนุนแทร็กแคนวัส

JavaScript:

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

ทดลองด้วยตัวเอง

เซโรง

context.strokeStyle=color|gradient|pattern;

ค่าของคุณ

ค่า คำอธิบาย
color ที่กำหนดสีสีสลับสำหรับตาพิมพ์ ค่าสี CSS。ค่าเริ่มต้นคือ #000000。
gradient สำหรับสีสลับที่ใช้ในการกราฟิกสายหรือกระจาย)
pattern สำหรับสร้างตัวแทนสีสลับสำหรับสีสลับตาพิมพ์

รายละเอียดเทคนิค

ค่าเริ่มต้น: #000000

ข้อความเพิ่มเติม

ตัวอย่าง 2

วาดเส้นทางตัวสี่เหลี่ยมผืนผ้า。ใช้สีสลับ:

เว็บเบราว์เซอร์ของคุณไม่สนับสนุนแทร็กแคนวัส

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");
// ใช้กราดสีที่เพิ่มเข้ามา
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ใช้สีสลับเขียนข้อความ "codew3c.com":

เว็บเบราว์เซอร์ของคุณไม่สนับสนุนแทร็กแคนวัส

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// สร้างสีสลับ
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// ใช้กราดสีที่เพิ่มเข้ามา
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

ทดลองด้วยตัวเอง

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้บอกเล่าเวอร์ชันแรกที่เปิดใช้งานอย่างเต็มที่ของคุณะนี้

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

หมายเหตุ：Internet Explorer 8 และเวอร์ชันต่อไปนั้นไม่สนับสนุนอย่างเต็มที่ปริมาณตัวอักษร <canvas>

คู่มืออ้างอิง HTML5 Canvas