HTML canvas strokeStyle attribute
Paglilinaw at Paggamit
strokeStyle Mga setting ng attribute o pagbibigay ng kulay, gradient o pattern sa brush
Mga Halimbawa
Halimbawa 1
Ilikha ng isang parihaba. Gamitin ang kulay ng brush na asul:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
Gramata
context.strokeStyle=color|gradient|pattern;
Halaga ng Atribute
| Halaga | Paglalarawan |
|---|---|
| color | Nagtutukoy sa kulay ng brush sa pagpipinta CSS na halaga ng kulay. Default na halaga ay #000000. |
| gradient | Object na gradient na ginamit sa pagpalit ng laman ng pagpipinta (LinearORadiyado) |
| pattern | Object na pattern na ginamit sa paglikha ng pattern na brush |
Detalye ng Teknolohiya
| Default na halaga: | #000000 |
|---|
Mga mas masusunod na halimbawa
Mga Halimbawa 2
Ilikha ng isang parihaba. Gamitin ang gradient na brush:
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);
Mga Halimbawa 3
Gamitin ang paggamit ng gradient na brush upang isulat ang teksto "codew3c.com":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Maykapiling ang paglikha ng gradient
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>
