Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีการวาดสี่เหลี่ยมบนผ้าใบ HTML5?


แท็ก HTML5 ใช้เพื่อวาดกราฟิก แอนิเมชั่น ฯลฯ โดยใช้สคริปต์ เป็นแท็กใหม่ที่นำมาใช้ใน HTML5 องค์ประกอบ canvas มีเมธอด DOM ที่เรียกว่า getContext ซึ่งรับบริบทการเรนเดอร์และฟังก์ชันการวาดภาพ ฟังก์ชันนี้รับพารามิเตอร์หนึ่งตัว ประเภทของบริบท 2d

ในการวาดรูปสี่เหลี่ยมผืนผ้าด้วยผ้าใบ HTML5 ให้ใช้เมธอด fillRect(x, y, width, height):

วิธีการวาดสี่เหลี่ยมบนผ้าใบ HTML5?

คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีวาดสี่เหลี่ยมผืนผ้าด้วย HTML5 Canvas

ตัวอย่าง

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   
   <body>
      <canvas id="newCanvas" width="200" height="100" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

ผลลัพธ์

วิธีการวาดสี่เหลี่ยมบนผ้าใบ HTML5?