การวาดรูปสี่เหลี่ยมผืนผ้าผ่าน canvas บน JavaScript

ไม่จำเป็นต้องวาดสี่เหลี่ยมจัตุรัสและสี่เหลี่ยมผืนผ้า โดยใช้การผสมผสานของ moveTo, lineTo เสมอไป - มีวิธีที่ง่ายกว่าสำหรับการนี้ มาดูกัน

เมธอด strokeRect

เมธอด strokeRect(x, y, ความกว้าง, ความสูง) วาดโครงร่าง (contour) ของสี่เหลี่ยมผืนผ้า ณ จุดที่กำหนด พารามิเตอร์สองตัวแรกระบุ พิกัดของจุด ซึ่งจะเป็นมุมซ้ายบน ของสี่เหลี่ยมผืนผ้าที่วาด

ลองวาดสี่เหลี่ยมผืนผ้าด้วย strokeRect (สมมติว่า ctx มีอยู่แล้ว):

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.strokeRect(50, 50, 100, 75);

Результат:

เมธอด fillRect

เมธอด fillRect(x, y, ความกว้าง, ความสูง) ทำงานเหมือนกับ strokeRect, เพียงแต่วาดสี่เหลี่ยมผืนผ้าที่เติมสี มาดูตัวอย่าง:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 75);

Результат:

เมธอด rect

เมธอดต่อไปนี้ rect(x, y, ความกว้าง, ความสูง) ก็วาดสี่เหลี่ยมผืนผ้าเช่นกัน แต่ สี่เหลี่ยมผืนผ้านี้จะปรากฏให้เห็นก็ต่อเมื่อ ใช้เมธอด stroke หรือ fill ในกรณีแรกจะเป็นโครงร่าง และในกรณีที่สอง - เป็นรูปทรงที่เติมสี

ลองวาดโครงร่างด้วย rect:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

และตอนนี้ลองวาดรูปทรงที่เติมสี:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

เมธอด clearRect

เมธอดต่อไปนี้ clearRect(x, y, ความกว้าง, ความสูง) ทำงานเหมือนยางลบ ทำความสะอาดพื้นที่สี่เหลี่ยมผืนผ้าและทำให้ เนื้อหาภายในโปร่งใสโดยสิ้นเชิง

ลองวาดสี่เหลี่ยมจัตุรัสด้วย fillRect และลบบางส่วนของมันด้วย clearRect:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: