Canvas beginPath() วิธี

การใช้งานและการระบุ

beginPath() วิธีเริ่มเส้นทางหรือฟื้นฟูเส้นทางปัจจุบัน。

คำเตือน:โปรดใช้วิธีเหล่านี้เพื่อสร้างเส้นทาง: moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() และ arc()。

คำเตือน:โปรดใช้ stroke() วิธีใช้งานในการวาดเส้นทางที่เห็นได้ชัดบนกระดานวาด。

ตัวอย่าง

วาดเส้นทางสองสายบนกระดานวาด; สีแดงและสีฟ้า:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // แบบเส้นสีแดง
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // กราะบวนการวาด
ctx.beginPath();
ctx.strokeStyle="blue"; // แบบเส้นสีฟ้า
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // กราะบวนการวาด

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

รูปแบบการใช้งาน

context.beginPath();

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

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

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

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