HTML canvas lineCap Attribute

Paglilinaw at Paggamit

lineCap Mga setting ng attribute o pagbabalik ng estilo ng linya sa dulo ng linya.

หมายเหตุ:"round" at "square" ay magiging mas mahaba ang linya.

Halimbawa

Tapusin ang pagpipinta ng linya ng patong:

Ang iyong browser ay hindi sumusuporta sa tag na canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

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

รูปแบบ

context.lineCap="butt|round|square";

ค่าทางตัวคุณสมบัติ

ค่า คำอธิบาย
butt ค่าเริ่มต้น ส่วนของสายทุกทิศทางจะมีขอบที่แบบตรง
round เพิ่มหัวยางกลมเข้าไปที่ทุกทิศทางของสาย
square เพิ่มหัวยางสี่เหลี่ยมจัตุรัสเข้าไปที่ทุกทิศทางของสาย

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

ค่าเริ่มต้น: butt

การสนับสนุนเบราเซอร์

ตัวเลขในตารางนี้ระบุรุ่นที่สนับสนุนคุณสมบัตินี้ในตัวเบราเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่

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

หมายเหตุ:Internet Explorer 8 และรุ่นเก่ากว่าไม่สนับสนุนองค์ประกอบ <canvas>