HTML Canvas Graphics

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

HTML Canvas คืออะไร?

<canvas> ใช้ในการวาดกราฟิกได้ทันทีผ่าน JavaScript

<canvas> เป็นเพียงภาชนะสำหรับกราฟิก คุณต้องใช้ JavaScript เพื่อวาดกราฟิกจริงๆ ซึ่ง Canvas มีหลายวิธีในการวาดเส้นทาง กล่อง วงกลม ข้อความ และการเพิ่มรูปภาพ

เบราว์เซอร์ที่สนับสนุน

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ <canvas> ทั้งหมด

ElementChromeEdgeFirefoxSafariOpera
<canvas>4.09.02.03.19.0

ตัวอย่าง Canvas

ผืนผ้าใบ (Canvas) เป็นพื้นที่สี่เหลี่ยมบนหน้า HTML ตามค่าเริ่มต้น ผืนผ้าใบไม่มีเส้นขอบและไม่มีเนื้อหา

Markup มีลักษณะดังนี้:

<canvas id="myCanvas" width="200" height="100"></canvas>

หมายเหตุ: ระบุ id Attribute (ที่จะอ้างถึงในสคริปต์) เสมอและ Attribute width และ height เพื่อกำหนดขนาดของผืนผ้าใบ 
หากต้องการเพิ่มเส้นขอบ ให้ใช้ Attribute style

ต่อไปนี้เป็นตัวอย่างของผืนผ้าใบเปล่าพื้นฐาน:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

</body>
</html>
ลองดูสิ ❱

เพิ่ม JavaScript

หลังจากสร้างพื้นที่ผ้าใบสี่เหลี่ยมแล้ว คุณต้องเพิ่ม JavaScript เพื่อทำการวาด

นี่คือตัวอย่างบางส่วน:

ตัวอย่างขีดเส้น

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>
ลองดูสิ ❱

ตัวอย่างวาดวงกลม

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<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> 

</body>
</html>
ลองดูสิ ❱

ตัวอย่างวาดข้อความ

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>

</body>
</html>
ลองดูสิ ❱

ตัวอย่าง Stroke Text

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>

</body>
</html>
ลองดูสิ ❱

ตัวอย่างวาด Linear Gradient

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<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>

</body>
</html>
ลองดูสิ ❱

ตัวอย่างวาด Circular Gradient

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<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>

</body>
</html>
ลองดูสิ ❱

ตัวอย่างวาดภาพ

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"></canvas>

<p><button onclick="myCanvas()">Try it</button></p>

<script>
function myCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
}
</script>

</body>
</html>
ลองดูสิ ❱
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯