使用JavaScript和Canvas开发游戏（一）地址：/forum.php?mod=viewthread&tid=2063目录1、认识一下Canvas2、在Canvas上绘图3、通过Canvas元素实现高级图像操作4、通过Canvas实现视差滚动5、写一个游戏框架（一）6、写一个游戏框架（二）7、动画8、JavaScript键盘输入9、综合运用10、定义级别11、跳跃与坠落12、添加道具13、加载资源14、添加主菜单1、认识一下CanvasCanvas元素以及JavaScript引擎中新增的一些特性，让Web开发人员不必借助第三方插件，即可设计开发出精细且具有交互性的2D网页。
这篇文章就向大家介绍一下Canvas 元素，以及它的一些可能的用途。
JavaScript与Canvas元素HTML是为创建静态页面而生的。
HTML所能实现的动态效果，也仅限于显示GIF动画和闪烁的文本。
JavaScript改变了这一切，通过它能够动态修改网页。
今天，很多Web 服务都利用AJAX来创建网页，为用户提供更加流畅的体验，也超越了标准HTML页面中常见的“点击－重新加载－点击”式的交互模式。
然而，JavaScript的某些功能会受到其宿主浏览器的制约。
尽管可以在网页中创建和修改任何元素，但JavaScript不能（轻易地）让浏览器显示一种新对象。
通过JavaScript修改文本、插入图像或者缩放表格都很容易，因为这些对象本来就是HTML所支持的。
如果你想再玩得刺激一点，比如写一个网页游戏，怎么办？那恐怕就得苦心积虑地改变标准HTML元素的用途，克服种种不测才能达到目的。
要么，你就得求助于Flash或Silverlight 这样的插件。
Canvas元素登场了。
这个新HTML元素为JavaScript开发者提供了一种无需插件即可在网页中直接绘图的机制。
Canvas元素最早是由苹果公司在其WebKit框架中引入的，Safari浏览器和Dashboard微件都在使用。
Canvas元素现在也被建议加入了HTML5规范，得到了最新的Chrome、Firefox、Opera以及Konqueror等浏览器的支持。
Internet Explorer（至少在IE8之前）还不支持Canvas，但ExplorerCanvas项目倒是为IE提供了与Canvas元素类似的功能。
Canvas元素对做过2D图形编程的人是小菜一碟。
可以在这个元素上画线、画各种形状、画渐变，甚至可以利用与其他2D API中类似的函数来修改其中的每一个像素。
得益于Chrome的V8、Firefox的SpiderMonkey以及Safari的Nitro等最新JavaScript引擎的性能，创建精细且具有交互性的Web应用已经完全没有问题。
我们这一系列文章将教会大家使用JavaScript和Canvas元素创建一个简单的平台游戏。
将要涉及的内容包括动画、加载资源、分层渲染、滚动和交互。
通过一步一步地展示示例代码和实际效果，你可以很快学会如何驾驭强大的Canvas元素。
2、在Canvas上绘图下面，我们就通过一个循序渐进的示例及实时演示，来介绍如何使用JavaScript在Canvas 元素上绘图及实现动画。
准备工作知道了什么是Canvas元素之后，该学习在屏幕上绘图了。
首先，需要一个HTML 页面来放置和显示Canvas元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="en"><head><title>JavaScript Platformer 1</title><script type="text/javascript" src="jsplatformer1.js"></script><style type="text/css">body { font-family: Arial,Helvetica,sans-serif;}</style></head><body><p><a href="/internet/web-development/articles/38364.aspx">Game Development with Javascript and the canvas element </a></p><canvas id="canvas" width="600" height="400"><p>Your browser does not support the canvas element.</p></canvas></body></html>下这些HTML代码很直观。
其中有两个重要的元素。
<script type="text/javascript" src="jsplatformer1.js"></script>这里包含的是将会修改Canvas元素的JavaScript代码，对应的Canvas元素的标记如下：<canvas id="canvas" width="600" height="400"><p>Your browser does not support the canvas element.</p></canvas>以上代码创建了一个Canvas元素。
不支持Canvas的浏览器，比如Internet Explorer（IE8之前的版本），会忽略这个元素，而只显示其子元素。
在这个简单的例子中，这个子元素就是一个段落，其中的文本告诉用户他们的浏览器不支持Canvas元素。
而对于那些支持Canvas元素的浏览器，如Chrome、Opera和Firefox，则会忽略Canvas元素的子元素。
这个Canvas元素的ID属性很重要，因为后面的JavaScript将通过它来取得对该元素的引用。
而width和height属性指定了画布的宽度和高度，这两个属性跟table或img 等其他HTML元素中的同名属性作用一样。
以下是jsplatformer1.js的代码：//每秒钟target帧const FPS = 30;var x = 0;var y = 0;var xDirection = 1;var yDirection = 1;var image = new Image();//建议读者将图片下载到本地加载（经测试，此图片响应头部的Content-Type为application/empty，浏览器无法识别）image.src = "/files/jsplatformer1-smiley.jpg";var canvas = null;var context2D = null;window.onload = init;function init(){canvas = document.getElementById('canvas');context2D = canvas.getContext('2d');setInterval(draw, 1000/FPS);}function draw(){context2D.clearRect(0, 0, canvas.width, canvas.height);context2D.drawImage(image, x, y);x += 1* xDirection;y += 1* yDirection;if (x >= 450) {x = 450;xDirection = -1;}else if(x <= 0){x = 0;xDirection = 1;}if (y >= 250) {y = 250;yDirection = -1;}else if(y <= 0){y = 0;yDirection = 1;}}如果只是一个Canvas元素，也没有什么用。
JavaScript必须要在这块画布上面画点什么，相应的代码保存在jsplatformer1.js中。
简单来说，JavaScript在这里先加载了一幅图像，然后将其画在画布上面，最后让它在画布上移动。
首先，定义一些全局变量。
const FPS = 30;FPS定义的是画布重绘的频率。
var x = 0;var y = 0;var xDirection = 1;var yDirection = 1变量x、y、xDirection和yDirection用于定义图像（相对于画布左上角）的位置，以及它在任意一时刻移动的方向。
var image = new Image();image.src = "/files/jsplatformer1-smiley.jpg";要把图像画到画布上，必须先加载一幅图像。
为此，我们创建一个Image对象，将其src属性设置为一幅图像文件的URL（建议把图片下载到本地。
——译者注）。
var canvas = null;var context2D = null;我们还需要取得对Canvas元素以及绘图上下文（稍后再详细介绍绘图上下文）的引用。
稍后我们会把正确的值赋给这两个变量，现在先把它们设置为null。
window.onload = init;最后，当页面加载完成后，我们必须知道立即运行绘制画布的代码；因此，在window 对象的onload事件发生时，立即调用init函数。
init函数function init(){canvas = document.getElementById('canvas');context2D = canvas.getContext('2d');setInterval(draw, 1000/FPS);}页面加载完毕后就会调用上面这个init函数。
在这个函数中，我们先通过在HTML文件中指定的ID属性取得画布元素（毫无疑问，除了把它叫做画布，还能叫个啥？），然后再取得这个画布的2D绘图上下文对象。