วิธี HTML canvas closePath()

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

คำนิยามและวิธีใช้

closePath() วิธีที่จะสร้างเส้นทางจากจุดปัจจุบันไปยังจุดเริ่มต้น

คำแนะนำ:ใช้ stroke() วิธีเพื่อวาดเส้นทางที่เฉพาะตัวบนแคนวัส

คำแนะนำ:ใช้ fill() ใช้วิธีเพื่อทาสีภาพ (เริ่มต้นเป็นสีดำ) โปรดใช้ fillStyle ใช้รายการคุณสมบัติเพื่อทาสีสีอื่น ๆ หรือ กราดสี

ตัวอย่าง

ตัวอย่าง 1

วาดเส้นทางรูป L แล้ววาดเส้นตรงกลับไปยังจุดเริ่มต้น:

เว็บเครื่องกลับรับไม่ได้เทคนิคแคนวัสของ HTML5

JavaScript:

var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

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

คำแนะนำ:มีตัวอย่างเพิ่มเติมที่ส่วนล่างของหน้า

คำนิยามและวิธีใช้

context.closePath();

ตัวอย่างเพิ่มเติม

ตัวอย่าง 2

ใช้สีเขียวเป็นสีที่จะทาสีในลักษณะนี้:

เว็บเครื่องกลับรับไม่ได้เทคนิคแคนวัสของ HTML5

JavaScript:

var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();

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

การสนับสนุนโปรแกรมนำ

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

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