หน้าเว็บเกม

HTML <canvas> ฟอร์มที่แสดงในหน้าเว็บไซต์ในรูปแบบของวัตถุสี่เหลี่ยม

Canvas HTML

<canvas> ตัวแทน

<canvas> มีทุกความสามารถที่จำเป็นสำหรับการสร้างเกม

ใช้ JavaScript บน <canvas> วาดภาพบนผนังแบบ 2D ของเรา

.getContext("2d")

<canvas> มีวัตถุที่ถูกกำหนดไว้ภายในตัวแทน getContext("2d") วัตถุ มีวัตถุที่ถูกกำหนดไว้ด้วยความชัดเจน สำหรับการวาดภาพ

คุณสามารถที่จะใช้ Canvas คู่มือ เรียนรู้เกี่ยวกับ <canvas> ตัวแทน getContext("2d") ความรู้เกี่ยวกับวัตถุ

แล้ว จงเริ่มต้น

เพื่อที่จะสร้างเกมส์ ต้องสร้างพื้นที่เกมส์และเตรียมพร้อมที่จะเรียกใช้การวาด

ตัวอย่าง

function startGame() {
  myGameArea.start();
}
var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }
}

ทดลองด้วยตัวเอง

ในช่วงหลังของตัวอย่างนี้，วัตถุ myGameArea จะได้รับคุณสมบัติและวิธีการมากขึ้น

ฟังก์ชัน startGame() เรียก myGameArea วัตถุ start() มีใบเส้น

start() มีใบเส้นใช้ <canvas> องค์ประกอบ <body> ในองค์ประกอบ