สี่เหลี่ยมกราม Canvas HTML
- หน้าก่อน รูปทรง Canvas
- หน้าต่อไป วงกลม Canvas
ตัวอย่าง
วาดกล่องขอบขนาด 150*100 พิกเซล
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
กลไก rect()
กลไก rect() ใช้เพิ่มกล่องขอบเข้าสู่ทาง
การใช้งาน
context.rect(x, y, width, height)
| ประกาศ | คำอธิบาย |
|---|---|
| x | ตำแหน่ง x ของซ้ายบนของกล่องขอบ |
| y | ตำแหน่ง y ของซ้ายบนของกล่องขอบ |
| width | ความกว้างของกล่องขอบ ด้วยพิกเซล |
| height | ความสูงของกล่องขอบ ด้วยพิกเซล |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้กลไก rect() ที่สร้างสามกล่องขอบ
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// สีแดง
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// สีเขียว
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// สีน้ำเงินสี
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();
ดูเพิ่มเติมที่
- หน้าก่อน รูปทรง Canvas
- หน้าต่อไป วงกลม Canvas
