Thứ Bảy, Tháng Mười 1, 2022
- Quảng cáo -
HomePOSTGame Tutorial

Game Tutorial

Game Canvas

The HTML <canvas> element is displayed as a rectangular object on a web page:

HTML Canvas

The <canvas> element is perfect for making games in HTML.

The <canvas> element offers all the functionality you need for making games.

Use JavaScript to draw, write, insert images, and more, onto the
<canvas>
.

.getContext(“2d”)

The <canvas> element has a built-in object, called the getContext("2d") object, with methods and properties for drawing.

You can learn more about the <canvas> element, and the
getContext("2d")
object, in our Canvas
Tutorial.

Get Started

To make a game, start by creating a gaming area, and make it ready for
drawing:

Example

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]);
  }
}

Try it Yourself »

The object myGameArea will have
more properties and methods later in this tutorial.

The function startGame() invokes the method
start()
of the
myGameArea
object.

The
start()
method creates a <canvas> element and inserts
it as the first childnode of the <body> element.

Đánh giá post
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments