บทนำ
แท็ก <canvas> ให้พื้นที่วาดกราฟิก 2D ด้วย JavaScript (Scripting) เหมาะสำหรับกราฟิกแบบ Raster (Pixel-based)
แอตทริบิวต์หลัก
| แอตทริบิวต์ | ค่า | คำอธิบาย |
|---|
width | pixels | ความกว้าง Drawing Surface (Default 300) |
height | pixels | ความสูง Drawing Surface (Default 150) |
id | string | ID สำหรับ JavaScript Select |
ตัวอย่าง: วาดสี่เหลี่ยม
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas Tag</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0, 0, 300, 100);
</script>
</body>
</html>
Canvas vs SVG
| คุณสมบัติ | Canvas | SVG |
|---|
| ประเภท | Raster (Pixel) | Vector |
| การขยาย-ย่อ | เสียคุณภาพ | ไม่เสียคุณภาพ |
| ประสิทธิภาพ (หลายวัตถุ) | สูง | ต่ำกว่า |
| Event Handling | Manual (Hit Testing) | DOM Events |
| Accessibility | ยาก | ดี (Title, Desc) |
| เหมาะสำหรับ | Game, Animation, Chart จุดมาก, Image Processing | Icon, Chart เรียบง่าย, Illustration, Map |
Context Types
2d - 2D Drawing (รองรับทุกเบราว์เซอร์)webgl / webgl2 - 3D Graphics (WebGL)bitmaprenderer - Offscreen Canvas
