เริ่มต้นใช้งาน canvas ใน JavaScript
Canvas คือพื้นที่พิเศษสำหรับวาดภาพ
ในเบราว์เซอร์โดยใช้ JavaScript พื้นที่นี้สร้างขึ้น
โดยใช้แท็ก <canvas> ซึ่ง
ควรกำหนดความกว้างและความสูง:
<canvas width="200" height="200"></canvas>
สำหรับการทำงานกับพื้นที่นี้บน JavaScript อันดับแรกให้รับลิงก์ไปยังแท็กนี้ไว้ในตัวแปรใด ๆ:
let canvas = document.querySelector('canvas');
จากนั้นต้องใช้เมธอด
getContext กับตัวแปรนี้:
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
สามารถทำให้ง่ายขึ้นได้:
let ctx = document.querySelector('canvas').getContext('2d');
ผลลัพธ์ที่ได้คือตัวแปร ctx จะเก็บ
วัตถุที่มีสิ่งที่เรียกว่า
บริบทการแสดงผล การวาดภาพทั้งหมด
จะเกิดขึ้นโดยใช้เมธอดของวัตถุนี้
ซึ่งเราจะศึกษาในบทเรียนถัดไป
