Canvas strokeStyle คุณสมบัติ
การรับรู้และการใช้งาน
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 | เป็นวัตถุ pattern ที่ใช้สร้างกราดสีบางสี (pattern stroke) |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | #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> ตามที่กำหนด
