HTML 的<canvas> 元素在网页中显示为一个矩形对象，也称画布，在画布里可以做你想做的:
HTML Canvas
在HTML中制作游戏，<canvas>元素是完美的选择.
<canvas> 元素为制作游戏提供所有的功能.使用 JavaScript绘制、书写、插入图像等等到<canvas>定义的画布.
.getContext("2d")
<canvas>有一个内建对象，称为 getContext("2d") 对象, 它提供绘制的方法和属性.
关于 getContext("2d")对象的学习参见我们的 Canvas 教程.
开始：
要做一个游戏，首先创建一个游戏区，并为绘图做好准备：
例子
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>元素的第一个子节点插入。
创建一个画布的完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
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]);
}
}
</script>
<p>We have created a game area! (or at least an empty canvas)</p>
</body>
</html>
查看网页效果
|
