在HTML <canvas>元素显示在网页上矩形对象：
HTML画布
在<canvas>元素非常适合在HTML制作游戏。
在<canvas>元素，为您提供需要制作游戏的所有功能。
使用JavaScript画画，写字，插入图片，以及更多，到<canvas> 。
.getContext（“2D”）
所述<canvas>元件具有一个内置的对象，称为getContext("2d")的对象，以用于绘制方法和属性。
您可以了解更多关于<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()调用方法start()的的myGameArea对象。
在start()方法创建一个<canvas>元素，然后它作为第一childnode <body>元素。