วิธี Canvas rect()

คู่มือเกี่ยวกับ Canvas

คำนิยามและการใช้งาน

rect() วิธีนี้สร้างสี่เหลี่ยมผืนผึ้ง

คำแนะนำ:ใช้ stroke() หรือ fill() วิธีนี้จะวาดสี่เหลี่ยมผืนผึ้งบนกระดานวาด

ตัวอย่าง

ตัวอย่าง 1

วาดสี่เหลี่ยมผืนผึ้งขนาด 150*100 พิกเซล:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

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

ภาษาเข้ารหัส

context.rect(x,y,width,height);

ค่าตัวแปร

ตัวแปร คำอธิบาย
x ตำแหน่ง x ของจุดบนซ้ายของสี่เหลี่ยมผืนผึ้ง
y ตำแหน่ง y ของจุดบนซ้ายของสี่เหลี่ยมผืนผึ้ง
width ความกว้างของสี่เหลี่ยมผืนผึ้ง ด้วยพิกเซล
height ความสูงของสี่เหลี่ยมผืนผึ้ง ด้วยพิกเซล

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

ตัวอย่าง 2

สร้างสามกราฟิกมุมมองด้วยวิธี rect():

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

JavaScript:

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.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();

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

การสนับสนุนโดยบราวเซอร์

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

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

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

คู่มือเกี่ยวกับ Canvas