การวาดรูปสี่เหลี่ยมผืนผ้าผ่าน canvas บน JavaScript
ไม่จำเป็นต้องวาดสี่เหลี่ยมจัตุรัสและสี่เหลี่ยมผืนผ้า
โดยใช้การผสมผสานของ moveTo,
lineTo เสมอไป - มีวิธีที่ง่ายกว่าสำหรับการนี้
มาดูกัน
เมธอด strokeRect
เมธอด strokeRect(x, y, ความกว้าง,
ความสูง) วาดโครงร่าง (contour)
ของสี่เหลี่ยมผืนผ้า ณ จุดที่กำหนด พารามิเตอร์สองตัวแรกระบุ
พิกัดของจุด ซึ่งจะเป็นมุมซ้ายบน
ของสี่เหลี่ยมผืนผ้าที่วาด
ลองวาดสี่เหลี่ยมผืนผ้าด้วย
strokeRect (สมมติว่า ctx
มีอยู่แล้ว):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
เมธอด fillRect
เมธอด fillRect(x, y, ความกว้าง, ความสูง)
ทำงานเหมือนกับ strokeRect,
เพียงแต่วาดสี่เหลี่ยมผืนผ้าที่เติมสี
มาดูตัวอย่าง:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
เมธอด rect
เมธอดต่อไปนี้ rect(x, y, ความกว้าง,
ความสูง) ก็วาดสี่เหลี่ยมผืนผ้าเช่นกัน แต่
สี่เหลี่ยมผืนผ้านี้จะปรากฏให้เห็นก็ต่อเมื่อ
ใช้เมธอด stroke หรือ fill
ในกรณีแรกจะเป็นโครงร่าง และในกรณีที่สอง
- เป็นรูปทรงที่เติมสี
ลองวาดโครงร่างด้วย rect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
และตอนนี้ลองวาดรูปทรงที่เติมสี:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
เมธอด clearRect
เมธอดต่อไปนี้ clearRect(x, y,
ความกว้าง, ความสูง) ทำงานเหมือนยางลบ
ทำความสะอาดพื้นที่สี่เหลี่ยมผืนผ้าและทำให้
เนื้อหาภายในโปร่งใสโดยสิ้นเชิง
ลองวาดสี่เหลี่ยมจัตุรัสด้วย fillRect
และลบบางส่วนของมันด้วย clearRect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
