AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > html游戏

认识游戏画布--canvas

51自学网 http://www.wanshiok.com

 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>

查看网页效果


 
上一篇:HTML Game Tutorial--html游戏教程--初体验  下一篇:html教程之游戏组件--在游戏区域添加一个红色方块