กราฟิกแคนวาส HTML
องค์ประกอบ HTML <canvas>ใช้ในการวาดกราฟิกบนหน้าเว็บ
กราฟิกทางด้านซ้ายสร้างด้วย<canvas>. โดยแสดงสี่องค์ประกอบ ได้แก่ สี่เหลี่ยมผืนผ้าสีแดง สี่เหลี่ยมผืนผ้าไล่ระดับสี สี่เหลี่ยมผืนผ้าหลากสี และข้อความหลากสี
HTML Canvas คืออะไร?
องค์ประกอบ HTML <canvas>ใช้ในการวาดกราฟิกผ่าน JavaScript ได้ทันที
องค์ประกอบ<canvas>เป็นเพียงคอนเทนเนอร์สำหรับกราฟิก คุณต้องใช้ JavaScript เพื่อวาดกราฟิกจริงๆ
Canvas มีหลายวิธีในการวาดเส้นทาง กล่อง วงกลม ข้อความ และการเพิ่มรูปภาพ
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุน
<canvas>องค์ประกอบอย่างสมบูรณ์
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
ตัวอย่างผ้าใบ
แคนวาสคือพื้นที่สี่เหลี่ยมบนหน้า HTML ตามค่าเริ่มต้น แคนวาสไม่มีเส้นขอบและไม่มีเนื้อหา
มาร์กอัปมีลักษณะดังนี้:
<canvas id="myCanvas" width="200" height="100"></canvas>
หมายเหตุ:ระบุidแอตทริบิวต์เสมอ (เพื่ออ้างถึงในสคริปต์) และแอตทริบิวต์ widthและheightแอตทริบิวต์เพื่อกำหนดขนาดของผ้าใบ หากต้องการเพิ่มเส้นขอบ ให้ใช้styleแอตทริบิวต์
ต่อไปนี้คือตัวอย่างผ้าใบเปล่าขั้นพื้นฐาน:
ตัวอย่าง
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
เพิ่ม JavaScript
หลังจากสร้างพื้นที่ผ้าใบสี่เหลี่ยมแล้ว คุณต้องเพิ่ม JavaScript เพื่อวาดรูป
นี่คือตัวอย่างบางส่วน:
ขีดเส้น
ตัวอย่าง
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
วาดวงกลม
ตัวอย่าง
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
วาดข้อความ
ตัวอย่าง
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
ข้อความจังหวะ
ตัวอย่าง
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
วาดเส้นไล่ระดับสี
ตัวอย่าง
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
วาดการไล่ระดับสีแบบวงกลม
ตัวอย่าง
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
วาดภาพ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
กวดวิชาผ้าใบ HTML
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ<canvas>โปรดอ่านHTML Canvas Tutorialของเรา