HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas
Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ความสามารถของภาษา
เราสามารถใช้ภาษา Javascript เขียนโปรแกรมคำสั่งและความสามารถของ Canvas Element เพื่อวาด Graphic
ในรูปแบบ 2D เพื่อแสดงผลบนหน้าเว็บไซต์ได้
ตัวอย่างการเริ่มใช้งาน html5 canvas
จากตัวอย่างด้านล่าง สังเกตุที่ canvas element จะไม่ได้กำหนดความกว้างและความสูงของ canvas ไว้ ในกรณี
ที่เราไม่ได้กำหนดความค่า Width & Height ของ canvas ไว้ ค่า default ความกว้างความสูงของ canvas จะมี
ค่า Width = 300 และ Height = 150
<html>
<head>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
</script>
</body>
</html>
เราสามารถกำหนดค่า width และ height ของ canvas ได้เพียงแค่เพิ่ม attribue ทั้ง 2 เข้าไปดังนี้
<canvas id="canvas" width="800" height="600"></canvas>
วิธีเขียน graphic 2d ลงใน canvas
เราสามารถเขียนโปรแกรมคำสั่งต่าง ๆ โดยใช้ภาษา Javascript ในรูปแบบ 2D บน canvas ได้ โดยเริ่มต้น
ต้องกำหนดก่อนว่าเราจะเขียนลงใน canvas ตัวไหนและทุก canvas จะมี context 2d ติดมาด้วย
เราจะเขียน graphic ต่าง ๆ ลงใน context 2d นี่แหล่ะครับ ดูตัวอย่าง
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(200, 200, 100, 0, 2 * Math.PI, false);
context.fillStyle = '#ff0000';
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#000';
context.stroke();
ทดลองเปลี่ยนสีพื้นของ canvas โดยใช้คำสั่ง javascript style เพื่อกำหนด backgroundColor
canvas.style.backgroundColor = "#999999";
ตัวอย่างโค๊ดทั้งหมด
<html>
<head>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(200, 200, 100, 0, 2 * Math.PI, false);
context.fillStyle = '#ff0000';
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#000';
context.stroke();
canvas.style.backgroundColor = "#999999";
</script>
</body>
</html>
