เมธอด strokeRect() ของ HTML Canvas

เมธอด strokeRect() ของ HTML Canvas

เมธอด strokeRect() ของ HTML canvas ใช้สำหรับสร้างสี่เหลี่ยมผืนผ้าบนหน้าเว็บ องค์ประกอบ <canvas> ช่วยให้คุณวาดกราฟิกบนหน้าเว็บโดยใช้ JavaScript ทุก canvas มีสองคุณสมบัติที่อธิบายความสูงและความกว้างคือ height และ width ตามลำดับ

รูปแบบการใช้งานมีดังนี้:

context.strokeRect(p, q, width, height);

โดยที่:

• p - พิกัด x ของมุมบนซ้ายของสี่เหลี่ยม
• q - พิกัด y ของมุมบนซ้ายของสี่เหลี่ยม
• width - ความกว้างของสี่เหลี่ยม
• height - ความสูงของสี่เหลี่ยม

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="550" height="400" style="border: 2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    ctx.strokeRect(120, 120, 220, 120);
  </script>
</body>
</html>

ผลลัพธ์