标签：至少1个，最多5个
之前在一文中，介绍过Canvas的各种属性以及方法的说明，并列举了自己写的一些Canvas demo，接下来开始写一个简单的小游戏吧，有多简单，这么说吧，代码不到100行，先上效果图:左侧为我们控制的控制板，右侧为假想的电脑控制的控制板体验小游戏链接:
首先在html页面中添加中添加一个canvas元素，并给出一个id用于在js代码中获取该元素并对其进行操作
&canvas id="canvas"&&/canvas&
然后就是对各种参数，注释中都有给出，我就不多说了，直接看
//获取canvas元素以及2d绘图环境c，以及设置canvas宽高为800x600
var canvas = document.getElementById("canvas"),
c = canvas.getContext("2d"),
W = canvas.width = 800,
H = canvas.height = 600;
var ballX = W / 2, ballY = H / 2, ballR = 10, ballVx = 10, ballVy = 2,
//球的位置、半径以及在X轴及Y轴的速度
panelW = 10, panelH = 100, panel1Y = (H - panelH) / 2, panel2Y = (H - panelH) / 2,
//控制板的宽高以及初始位置
player1Score = 0, player2Score = 0, winnerScore = 3,
//记录玩家的分数以及得了多少分算赢
isEnd = 0;
//判断是否比赛结束的变量，0为未结束，1为已结束
封装工具方法
//绘制长方形(也就是控制板)
function fillRect(x, y, w, h, style) {
c.fillStyle =
c.fillRect(x, y, w, h);
//绘制圆(也就是游戏中的球)
function fillCircle(x, y, r, style) {
c.fillStyle =
c.beginPath();
c.arc(x, y, r, 0, Math.PI * 2);
//绘制文字(得分和显示输赢)
function fillText(txt, x, y, font, style) {
c.fillStyle = style || "white";
c.font = font || "40px DejaVu Sans Mono";
c.textAlign = "center";
c.textBaseline = "middle";
c.fillText(txt, x, y);
我们需要在canvas元素上添加监听事件，一是当结束的也就是isEnd为1的时候，当鼠标点击在canvas上的时候再来一把游戏，重置玩家分数以及重启动画绘制，二是我们需要控制左侧控制板的运动，不过只需要在Y轴运动即可
canvas.addEventListener("click", function () {
if (isEnd) {
player1Score = 0;
player2Score = 0;
isEnd = 0;
animate();
//主要的绘制方法
//获取鼠标在canvas上实际Y轴位置减去控制板的高度也就是控制板实际绘制的初始位置
canvas.addEventListener("mousemove", function (e) {
panel1Y = e.clientY - canvas.getBoundingClientRect().top - panelH / 2;
//球边界判断
if (ballX - ballR - panelW & 0) {
if (ballY & panel1Y && ballY & panel1Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel1Y + panelH / 2)) * .3;
player2Score++;
ballReset();
if (ballX + ballR + panelW & W) {
if (ballY & panel2Y && ballY & panel2Y + panelH) {
ballVx = -ballVx;
ballVy = (ballY - (panel2Y + panelH / 2)) * .3;
player1Score++;
ballReset();
if (ballY + ballR & 0 || ballY - ballR & H) {
ballVy = -ballVy;
//用于控制右侧控制板的运动
if (panel2Y + panelH / 2 & ballY - 40) {
panel2Y = panel2Y + 5;
} else if (panel2Y + panelH / 2 & ballY + 40) {
panel2Y = panel2Y - 5;
我这里直接在animate方法里使用requestAnimationFrame(animate)，更兼容的方法应该是以下这样，为了偷个懒就没写兼容写法
var RAF = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
RAF(animate);
到此，该小游戏的介绍到此结束，简单吧
1 收藏&&|&&2
你可能感兴趣的文章
134 收藏，3.9k
44 收藏，3.1k
167 收藏，1.6k
分享到微博？
我要该，理由是：有一个canvas上做小游戏的问题【javascript吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：155,862贴子：
有一个canvas上做小游戏的问题收藏
我现在基本代码都打好了 可是出了点事件覆盖之类的问题
实在不会解决
希望可以帮我看看 二楼上链接 在CSDN论坛提出的
这样比较方便
千锋javascript 名师荟萃 汇聚html5前沿技术 全栈式教学模式 免费试学两周千锋javascript 0基础20周快速提升,成就html5实战精英 实战教学 学习就业无缝对接!
大神们帮看看
登录百度帐号推荐应用　　今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。
　　游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的字母游戏才结束。
　　下面介绍js代码中需要用到的一些变量及其他们的含义，系统会在开始的时候初始化这些变量。
guesses：用户猜字母的次数；
message：帮助玩家如何玩游戏的说明；
letters：保存26个英文字母的数组；
today：当前时间；
letterToGuess：系统选中的字母，也就是你需要猜中的字母；
higherOrLower：提示用户当前输入的字母比答案大还是小；
lettersGuessed：用户已经猜过的字母；
gameOver：游戏是否结束。
var guesses = 0;
var message = "Guess The Letter From a (lower) to z (higher)";
var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var today = new Date();
var letterToGuess = "";
var higherOrLower = "";
var lettersG
var gameOver = false;
　　下面我们介绍响应键盘弹起的事件，用来判断用户输入的字母是否是正确答案：
$(window).bind('keyup', eventKeyPressed);
function eventKeyPressed(e) {
//首先判断游戏是否结束
if (!gameOver) {
//获取输入字母
var letterPressed = String.fromCharCode(e.keyCode);
//做小写处理
letterPressed = letterPressed.toLowerCase();
//游戏次数加1
guesses++;
//把输入字母保存到已猜字母数组
lettersGuessed.push(letterPressed);
//判断输入字母和答案是否一致，一致则游戏结束
if (letterPressed == letterToGuess) {
gameOver = true;
//获取答案在字母数组中的位置
var letterIndex = letters.indexOf(letterToGuess);
//获取输入字母在字母数组中的位置
var guessIndex = letters.indexOf(letterPressed);
Debugger.log(guessIndex);
//判断大小
if (guessIndex & 0) {
higherOrLower = "That is not a letter";
} else if (guessIndex & letterIndex) {
higherOrLower = "Letter is Lower than you entered";
higherOrLower = "Letter is Higher than you entered";
//重绘canvas
drawScreen();
　　这里需要注意的一点是，当我们需要对canvas中的图像做修改时，一般会重新绘制整个canvas对象。所以在我们每猜一次字母，都会执行drawScreen把整个canvas上的所有对象都绘制一遍。
　　下面我们看看drawScreen都干了什么。
function drawScreen() {
//background
context.fillStyle = '#ffffaa';
context.fillRect(0, 0, 500, 300);
context.strokeStyle = '#000000';
context.strokeRect(5, 5, 490, 290);
context.textBaseLine = 'top';
context.fillStyle = '#000000';
context.font = '10px_sans';
context.fillText(today, 150, 20);
context.fillStyle = '#ff0000';
context.font = '14px_sans';
context.fillText(message, 125, 40);
context.fillStyle = '#109910';
context.font = '16px_sans';
context.fillText('Guesses:' + guesses, 215, 60);
//higher or lower
context.fillStyle = '#000000';
context.font = '16px_sans';
context.fillText('Higher or Lower:' + higherOrLower, 150, 125);
//letters guessed
context.fillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText('Letters Guessed:' + lettersGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("You Got It!", 150, 180);
　　代码很简单，就是绘制背景，还有文字信息。下面我们介绍导入图像的功能，当我们点击&Export Canvas Image&按钮的时候，会打开一个新的页面，显示当前的图像。注意toDataURL()方法，他会返回一个64位的png图片数据。
$('#createImageData').click(function () {
　　window.open(theCanvas.toDataURL(), 'canvasImage', 'left=0,top=0,width=' + theCanvas.width + ',height=' + theCanvas.height + ',toolbar=0,resizab　　　　　　　　 le=0');
　　大家还是直接运行demo，查看最终效果吧。demo下载地址：
阅读(...) 评论()如何开发一个简单的HTML5 Canvas 小游戏_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
如何开发一个简单的HTML5 Canvas 小游戏
我有更好的答案
荐你去h5小游戏站
核弹头小游戏，也有h5的教程，看一看，里面很多小游戏
为您推荐：
其他类似问题
html5的相关知识
换一换
回答问题，赢新手礼包扫一扫下载手机客户端
扫描我，关注团购信息，享更多优惠
||网络安全
| | | | | | | | | | | | | | | |
||电子电工
汽车交通| | | | | | | | | |
||投资理财
| | | | | | | | | | | | | | | | |
| | | | | | |
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
||外语考试
| | | | | | | | |
| 视频教程|
HTML5 Canvas核心技术:图形.动画与游戏开发
定价：￥99.00
校园优惠价：￥69.30 (70折)
促销活动：
商品已成功飞到您的手机啦！快登录手机站看看吧！
下载客户端
> 微信关注“互动出版网”，便捷查询订单，更多惊喜天天有
原书名：Core HTML5 Canvas: Graphics, Animation, and Game Development
原出版社：
ISBN：0上架时间：出版日期：2013 年5月开本：16开页码：486版次：1-1
所属分类：
　 HTML5 Canvas领域的标杆之作，公认的权威经典，Amazon五星级超级畅销书，资深技术专家DavidGeary最新力作
全面讲解Canvas元素的各种功能特性，以及如何利用Canvas进行图形绘制、动画制作、游戏开发、自定义控件制作和移动应用开发，包含大量实例，可操作性极强
《HTML5 Canvas核心技术：图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作，也是迄今为止该领域内容最为全面和深入的著作之一，是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary最新力作。它不仅全面讲解了canvas元素的API，以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发，还包含大量实例，可操作性极强。
全书共分11章。第1章介绍了canvas元素及如何在网络应用程序中使用它；第2章深入研究了如何使用Canvas的API进行绘制；第3章告诉读者如何绘制并操作Canvas中的文本；第4章专门讲解图像、图像的操作及视频处理；第5章介绍如何实现平滑的动画效果；第6章讲解如何用JavaScript语言来实现精灵；第7章展示了如何在动画中模拟物理效果；第8章介绍了进行碰撞检测所用的技术；第9章以一个简单但是高效的游戏引擎开始，提供了游戏制作所需的全部支持功能；第10章讨论了实现自定义控件的通用方法；第11章专门讲述如何实现基于Canvas的手机应用程序。
David Geary，资深软件开发专家，擅长 HTML5、CSS和Javascript等Web开发技术和Java技术。他是一位优秀的作家，著有畅销书《Graphic Java 2：Swing，Third Edition》 (《Java 2图形设计卷2：Swing》，机械工业出版社，2000年出版)和《Core JavaServerTM Faces，Third Edition》(与Cay Horstmann合著，由Prentice Hall于2010年出版)。他还是一位优秀的演讲者，是各种演讲活动的常客，曾三度获得“JavaOne Rock Star”荣誉称号，并22011年同他人联合创立了HTML5 Denver Meetup Group。此外，他还是一位经验丰富的技术顾问，主要传授与网络应用开发相关的技术。
爱飞翔，资深软件开发工程师，擅长Web开发、移动开发和游戏开发，有10余年开发经验，曾主导和参与了多个手机游戏和手机软件项目的开发，经验十分丰富。他是手机软件开发引擎AgileMobileEngine的创始人兼项目经理，同时也是CatEngine手机游戏开发引擎的联合创始人兼代码维护员。他对极限编程、设计模式、重构、测试驱动开发、敏捷软件开发等也有较深入的研究，目前负责敏捷移动开发网(http://www. /)的运营。业余爱好文学和历史，有一定的文学造诣。
《HTML5 Canvas核心技术：图形、动画与游戏开发》
第1章　基础知识 1
1.1　canvas元素 1
1.1.1　canvas元素的大小与绘图表面的大小 4
1.1.2　canvas元素的API 5
1.2　Canvas的绘图环境 6
1.2.1　2d绘图环境 6
1.2.2　Canvas状态的保存与恢复 8
1.3　本书程序清单的规范格式 9
1.4　开始学习HTML5 10
1.4.1　规范 10
1.4.2　浏览器 11
1.4.3　控制台与调试器 11
1.4.4　性能 13
1.5　基本的绘制操作 15
1.6　事件处理 18
1.6.1　鼠标事件 18
1.6.2　键盘事件 22
　　HTML5是一个富有活力的前沿领域，虽说早在2008年年初就发布了第1份草案，然而该标准的流行则是2010年之后的事情了。
　　HTML5技术的兴起有多方面的原因。其中比较重要的一点就是，1999年制定的HTML4.01标准在十几年后已经无法满足急速增长的网络开发需求了。与传统的“服务器-客户端”架构相比，越来越多的开发者开始选择以网页的形式来制作应用软件与游戏。这样做能够降低维护成本，将原来更新客户端所花的精力投入到网页程序的完善之上，以便更加及时地满足新出现的客户需求。如此一来，怎样弥补网页程序在图形绘制、设备底层功能调用、文件访问、影音播放等方面的劣势，就成为制定新标准时必须考虑的问题了。HTML5标准新增的各类API能够很好地应对这些状况。
　　此外，近年来日益兴起的移动开发也引发了人们对HTML5技术的关注。在传统的开发方式中，我们必须移植出版本繁多的客户端，以应对那些操作系统、屏幕大小、硬件配置各不相同的手机及平板电脑。如果我们将这种开发流程以HTML5应用的形式统一起来，那么就可以省去在各种设备之间进行移植所带来的问题。
　　不论是在传统的桌面操作系统之上，还是在新兴的移动设备之中，各大浏览器厂商都在努力适应新的HTML5标准，力求提供一套功能丰富而且外观统一的API。尽管HTML5标准仍在不停地更新之中，但是其基本开发思路已经受到众多开发者及用户的肯定。所以说，在HTML5标准最终定型之前，提前学习新标准，及早推出开发成本适中而且产品内容丰富的各类HTML5网络应用软件与游戏，不仅可以提高自身的技术能力，还可以把握软件市场的走向，总体来看，是一项明智的抉择。
　　网络应用开发是一项外延很广的领域，在企业级开发中，我们要学习各种服务器通信技术、软件架构及开发框架，而在另外一些实用软件及游戏的开发中，则又需要投入大量时间进行网页前端的美化。从开发者学习知识的角度看，如果将HTML、JavaScript、CSS等制作网络应用程序所需的技术分开研究，则难以把握它们之间的联系，本书的出现正好解决了这个问题。选择Canvas为切入点是恰到好处的，因为在各类网络应用软件与游戏中，都要或多或少地用到与绘制相关的功能。如果能够将网页开发常用的HTML、JavaScript、CSS等技术有机地结合起来，那么就可以充分地发挥Canvas在绘图方面的优势，制作出效果可与原生应用程序相媲美的产品来。
　　研究Canvas的另一个好处是，我们在学习它的同时，还能掌握与之相关的各项实用技术，诸如图形与曲线的编辑、文本的绘制与输入、图像滤镜，等等。在学习这些技术的过程中，读者将会逐步掌握如何通过JavaScript代码来动态地运用Canvas所提供的各项功能。本书后半部分集中讲解了Canvas的几项重要用途，包括动画与精灵、游戏物理学、碰撞检测、游戏开发，等等。借助一个精美的弹珠台游戏，作者将这些重要技术详细而深入地讲解了一番，学习这部分内容将有助于提高图形开发及游戏制作的水平。
　　全书最后不仅演示了如何实现圆角矩形、滚动条、滑动条及图像查看器等自定义控件，而且还教给大家实现这些自定义控件所遵循的流程，使我们能够用相似的办法实现一大批符合自己需求的新控件来。此外，作者还详细介绍了如何让开发出来的应用程序能够更好地运行于各类移动设备之上。
　　本书作者清晰而又透彻的行文风格，不仅把图形绘制、动画制作、游戏开发、自定义控件、移动开发等几项重要知识讲解得十分精彩，而且还启迪了我们的开发思路。读完全书之后，大家更需要思考如何利用JavaScript程序，将类似Canvas这样的新兴技术与传统的HTML、CSS结合起来，开发出更加丰富灵活的网络应用程序来。
　　在本书的翻译过程中，我得到了机械工业出版社华章公司各位编辑及工作人员的帮助，在此表示由衷的感谢。
　　本书由爱飞翔翻译，王鹏、舒亚林及张军也参与了部分翻译工作。译者非常愿意与诸位朋友通过微博（/eastarlee）或电子邮件（）探讨各类HTML5技术问题。由于水平有限，错误和不当之处在所难免，敬请广大读者批评指正。
　　2001年夏天，笔者阅读了一本有关网络应用程序开发的畅销书。此时，我已经从事了15年图形用户界面（Graphics User Interface， GUI）与“图形密集型应用程序”（graphic-intensive application）的开发。当时我并不知道，那本书的作者Jason Hunter，会在No Fluff Just Stuff（NFJS）巡回演讲上成为我的好朋友。
　　看完了Jason所著的那本有关Servlet的书之后，我将它放在膝上，凝望着窗外。做了这么多年的Smalltalk、C++与Java语言的开发工作，并富有激情地写完了1622页的《Graphic Java 2: Swing》一书后，我对自己说：是不是真的该像编写HTML网页那样，用类似打印语句那样的代码来实现用户界面了？是的，我的确这样做了。
　　从那时起，我就在自认为是“软件开发的黑暗时代”之中艰难前行。我是Apache Struts项目的第二个代码提交者，并且创造了Struts模板库 （Struts Template Library），该库最终演进成了流行的Tiles项目。我在“JavaServer Faces（JSF）专家组（expert group）”中待过6年多，还在超过120场NFJS研讨会及许多其他会议中做过关于服务器端Java开发（server-side Java）的演讲，并且与人合著了一本关于JSF的书。曾经有一段时间， Google Web Toolkit与Ruby on Rails技术令我感到兴奋，不过到了这段苦日子的最后，整个工作基本都是枯燥的业务逻辑：在客户端向用户展示数据表单，并在服务器端对其进行处理，再也找不回当初做图形开发及图形用户界面时的那种激情了。
　　2010年夏天，在HTML5技术以不可阻挡之势流行起来的时候，我偶然看到了一篇讲述Canvas元素的文章，那时我就知道，救赎的时刻即将来临。我立刻放下了职场中的一切事务，将所有时间都投入到写作之中，力求写出一本最好的Canvas书籍。从那时起，直到2012年3月本书完成，我完全沉浸在Canvas技术和这本书的写作之中。这是迄今为止带给我最多写作乐趣的一本书。
　　从文字处理到电子游戏，它们所需的全部图形功能，Canvas元素都会提供给你。尽管它在各个平台中的性能有所差异，不过总的来说，Canvas的运行速度还是很快的，尤其是在iOS5平台上，Mobile Safari浏览器可以利用硬件加速来支持Canvas的渲染。浏览器厂商们在遵循HTML5规范方面做得都相当好，所以，编码良好的Canvas应用程序无需修改即可在任何兼容HTML5的浏览器中运行，偶有轻微的不兼容现象。
　　HTML5就像是“软件开发黑暗时代”之后的“文艺复兴”，可以说，Canvas元素是HTML5中最激动人心的技术。本书将深入讲解Canvas元素及相关的HTML5技术（例如动画时间控制规范），利用这些技术可以开发出能够跨桌面浏览器及移动平台运行的应用程序。
　　如何阅读本书
　　本书的写作方式，用禅意一些的话来说，就是可以使你“无需阅读即可领会其内容”（read it without reading）。
　　在撰写每一章（通常耗时数月）的过程中，我有时一个字都不写，只是一直反复地阅读写作材料。在那段时间中，我致力于准备写作提纲、程序清单、屏幕截图、表格、示意图、条目列表、注解、小窍门及注意事项。这些被我叫做“支架”（scaffolding）的东西，才是本书中最为重要的部分。书中的正文，是我在搭好上述支架后才写的，它们是为了给周边的支架材料提供上下文说明，并阐明其中的重要之处。写好后，我又会反复阅读几遍，尽可能地删掉多余的文字。
　　因为本书专注于提供支架式的学习材料，且惜墨如金，所以这样一本书很容易让读者“无需阅读即可领会其内容”。你可以略读其中的文本，而专注于屏幕截图、程序清单、示意图、表格，以及其他支架材料，无论你想了解什么话题，这么做都能让你学到很多知识。你可以随意将书中的正文视为二等公民，而且，如果乐意的话，等需要查阅正文的时候再来读也不迟。
　　全书概览
　　本书由两部分组成。第一部分包括前4章，几乎占了本书篇幅的一半。这部分讲解了Canvas元素的API，告诉读者如何在Canvas元素上面绘制图形与文本，如何绘制并操作图像。本书剩下的7章将告诉读者，如何实现动画效果及动画精灵，如何创建物理模拟效果，如何进行碰撞检测，以及如何开发电子游戏。在本书最后两章之中，有一章会讲如何实现一些自定义控件，例如进度条、滑动条（slider）、图像查看器（image panner），另外一章将会告诉你如何创建基于Canvas的手机应用程序。
　　第1章“基础知识”，介绍了canvas元素，并且演示了如何在网络应用程序中使用它。本章有一个小节，介绍了进行HTML5开发所需的一般性入门知识，包括浏览器、控制台、调试器、性能分析器、时间轴等。接下来的内容为读者讲解如何实现canvas元素的一些基本功能：如何在canvas之上绘制、canvas参数以及绘图表面自身的保存与恢复、打印canvas，还有一段关于离屏canvas（offscreen canvas）的简介。本章最后简单地介绍了一些基础的数学知识，包括基本的代数运算、三角函数、向量数学，以及根据计量单位推导等式。
　　第2章“绘制”，这是全书篇幅最长的一章，深入研究了如何使用Canvas的API进行绘制，告诉读者如何在canvas上绘制线条、弧线、曲线、圆、矩形以及任意多边形，如何以纯色、渐变色及图案对其进行填充。本章不仅讲述了绘图机制，还向读者展示了如何使用Canvas API来制作一些有实际用途的范例程序，例如：通过绘制临时的辅助矩形来创建橡皮带线条（rubber band）；拖动canvas之中的图形；实现一个简单的保留模式图形子系统，用以跟踪canvas之中的多边形，以便让用户对其进行编辑；使用剪辑区域，在不影响Canvas后方背景的情况下擦除图形。
　　第3章“文本”，告诉读者如何绘制并操作canvas之中的文本。你将会学到如何对文本进行描边与填充，如何设置字型属性，以及如何调整文本在canvas之中的位置。本章也讲了如何在Canvas中实现自制的文本控件。本章最后讲述了如何制作闪烁的文本编辑光标以及可编辑的文本段。
　　第4章“图像与视频”，专门讲解图像、图像的操作以及视频处理。你将会看到如何在canvas中绘制与缩放图像，你还将学到如何通过获取每个像素的颜色分量来编辑图像。在这一章中还可以学到更多有关剪辑区域的使用方法，以及如何将图像做成动画的知识。接下来的内容强调了安全与性能的重要性，最后以视频处理来结束本章内容。
　　第5章“动画”，告诉读者如何运用名为requestAnimationFrame()的方法来实现平滑的动画效果。该方法定义在W3C一个题为“基于脚本动画的定时控制”（Timing control for script-based animations）的规范中。读者还将看到计算动画帧速率的方法，以及如何进行其他活动的排期，例如以另外一种帧速率来刷新动画的用户界面。本章将会告诉读者在播放动画时用来恢复背景图像的三种策略，并且比较了每种方式所存在的性能隐忧。本章还演示了如何实现基于时间的运动效果，动画的背景滚动，使用视差来制作仿3D效果，以及在播放动画的过程中检测并响应用户手势。本章收尾部分讲了定时动画，并实现了一个简单的动画定时器，其后讨论了动画制作的最佳实践。
　　第6章“精灵”，向读者讲解了如何以JavaScript语言来实现精灵（即带有动画效果的显示对象）。精灵对象具有可视化的表现形式，这通常指的是一幅图像。你可以在canvas内移动它们，并且循环地播放某个图像集合中的图片，来以此产生动画效果。精灵是用以制作游戏的基础构建单元。
　　第7章“物理效果”，向读者展示了如何在动画中模拟物理效果，对其进行建模，包括下坠的物体、抛射体的弹道，以及摇晃的钟摆。本章还向读者展示了如何将时间与运动这两个要素封装入动画之中，以模拟真实世界的移动效果，诸如刚起跑的短跑运动员（加速运动）与正在刹闸的汽车（减速运动）。
　　在许多游戏中，碰撞检测是另一个重要的方面。所以，本书第8章“碰撞检测”专门讲解进行精灵之间碰撞检测所用的技术。本章开头讲述了使用外接矩形或外接圆形所进行的简单碰撞检测。这种办法实现起来很简单，然而并不是十分可靠。鉴于在很多情况下，简单的碰撞检测结果都不可靠，所以，本章的大部分内容都用于讲解分割轴定理（Separating Axis Theorem）。该定理是在任意2D或3D多边形之间，进行碰撞检测所用的最佳手段之一。然而，它并不是说给那些有数学恐惧症的人（mathematically faint of heart）听的，所以，这一章要花大量的篇幅，并以外行人听得懂的词语来表述这个定理。
　　基 础 知 识
　　1939年，米高梅公司（Metro-Goldwyn-Mayer Studios）曾经发行了一部电影，根据美国国会图书馆（American Library of Congress）的说法，它注定会成为历史上观看人数最多的电影。《绿野仙踪》这部电影讲述了一个名叫Dorothy的年轻女孩与宠物狗Toto的故事。他们被一阵猛烈的龙卷风从美国中部的堪萨斯州刮到了名为“奥兹王国”（Oz）的一片梦幻国度之中。
　　这部电影一开始，是乏味与沉闷的黑白场景，等到Dorothy与Toto到了奥兹王国，电影一下子就切入了色彩鲜明的画面之中，整个冒险也就随之开始了……
　　在过去二十多年的时间里，软件开发者一直都在编写乏味、沉闷的网络应用程序，这些程序不外乎将一张张老套的表格永无止境般地展示给用户，令人烦躁不堪。终于，我们来到了HTML5的国度，它让开发者可以制作出激动人心的应用程序来。这些程序运行在浏览器之中，但是看上去与传统的桌面应用程序很相似。
　　在这个HTML5的奥兹王国中，我们将使用具有魔力的canvas元素，来在浏览器中做一番奇妙的事情。我们将会实现一个如图1-1所示的图像查看器，一个交互式的放大镜，一个可以在各种得体的浏览器以及iPad之中运行的绘图程序。我们还要做很多动画，包含一个优秀的弹珠台游戏在内的许多游戏，一些图像效果滤镜，以及很多其他的网络应用程序。在以前，上述软件完全处于Flash开发的领域之中。
　　咱们开始吧！
　　图1-1Canvas提供了功能强大的图形处理API
　　1.1canvas元素
　　canvas元素可以说是HTML5元素中功能最强大的一个。然而，你马上就会看到，它真正的能力是通过Canvas的context 对象而表现出来的。该环境变量可以从canvas元素身上获取。图1-2是一个简单的例子，它使用了canvas元素及与之相关的绘图环境。
　　图1-2Hello Canvas范例程序
　　图1-2中的应用程序非常简单，它将一个字符串显示出来，该字符串大致与canvas自身的中心点对齐。该应用程序的HTML代码如程序清单1-1所示。
　　程序清单1-1中使用了canvas元素，为其指定了一个标识符，并设置了该元素的宽度与高度。请注意canvas元素内容部分（body）所含的文本，这种文本叫做“后备内容”（fallback content），浏览器仅在不支持canvas元素的时候，才会显示该内容。
　　程序清单1-1example.html
　　（!DOCTYPE html）
　　（html）
　　（head）
　　（title）A Simple Canvas Example（/title）
　　（style）
　　body {
系列图书推荐 ￥79.00￥55.30
同类热销商品￥108.00￥86.40
订单处理配送
北京奥维博世图书发行有限公司 china-pub,All Rights Reserved