Canvas element มีคำสั่งในการควบคุมเยอะมากเช่น วาดเส้นวงกลม สี่เหลี่ยม เส้นตรง เส้นโค้ง ฯลฯ คนที่จะเขียนต้องมีความรู้พื้นฐานและเข้าใจในโครงสร้างของภาษา HTML และ JavaScript พอสมควร
Canvas element ทำให้เราสามารถสร้างที่สามารถใช้งานแทน Flash ได้เลย มีคนใช้ canvas ในการสร้างเกมส์ การเรียนรู้การใช้งาน canvas นั้นไม่ยากสามารถศึกษาได้จาก HTML5 Canvas แต่การจะวาดรูปให้สวยงามนั้นเราต้องรู้จักฟังก์ชันของ JavaScript ด้วย
Canvas นั้นก็เหมือนๆกับ Element อื่นๆ สามารถกำหนด Style ให้ได้ไม่ว่าจะเป็นสี ขนาดความกว้าง ความสูง กำหนดตำแหน่งได้ด้วย
ตัวอย่างการวาดเส้นโค้งใน canvas
โค้ด: เลือกทั้งหมด
<html>
<meta charset="UTF-8"/>
<canvas height="200" id="myCanvas" width="578"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2; // จุดกึ่งกลาง x
var y = canvas.height / 2; // จุดกึ่งกลาง y
var radius = 80; // รัศมี
var startAngle = 1.1 * Math.PI; // มุมเรเดียนเริ่มต้น
var endAngle = 1.9 * Math.PI; // มุมเรเดียนสิ้นสุด
var counterClockwise = false; // วาดทวนเข็มนาฬิกา หรือตามเข็มนาฬิกา
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5; // ความหนาเส้น
// line color
context.strokeStyle = 'red'; // สีเส้น
context.stroke();
</script>บทที่ 3 HTML5 Canvas แท็กที่ใช้สร้างงานกราฟฟิกใน HTML5 เปลี่ยนลูกเล่นการแสดงผลจากเดิม