两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide(斧子演示,www.axeslide.com)。在这个领域也积累了一些 经验,希望有机会和大家分享。今天是要给大家推荐两本这方面的书,同时会送一本书给大家。
要介绍的第一本书是我学习Canvas开发的入门书——《HTML5 Canvas核心技术:图形、动画与游戏开发》。 此书作者David Geary,中文版译者为爱飞翔,由机械工业出版社出版。
我相信这本书,不仅是我个人,很多学习Html5 Canvas开发的同学都是把它当做案头必备。 这本书是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的经典、五星级畅销书、资深技术专家David Geary力作。它不仅全面讲解了canvas元素的API,以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发,还包含大量实例,可操作性极强。 我们在开发斧子演示的时候,从基本的绘图,图片,视频,音频处理,到动画、文本处理, 所有核心开发内容都能从这本书中获取知识和灵感。
《HTML5 Canvas核心技术:图形、动画与游戏开发》共分11章。第1章介绍了canvas元素及如何在网络应用程序中使用它;第2章深入研究了如何使用Canvas的API进行绘制;第3章告诉读者如何绘制并操作Canvas中的文本;第4章专门讲解图像、图像的操作及视频处理;第5章介绍如何实现平滑的动画效果;第6章讲解如何用JavaScript语言来实现精灵;第7章展示了如何在动画中模拟物理效果;第8章介绍了进行碰撞检测所用的技术;第9章以一个简单但是高效的游戏引擎开始,提供了游戏制作所需的全部支持功能;第10章讨论了实现自定义控件的通用方法;第11章专门讲述如何实现基于Canvas的手机应用程序。
上面的书已经成为经典,接下来的这本,即将成为经典。同样是大牛David Geary的力作——《HTML5 2D游戏编程核心技术》。
此书由机械工业出版社出版,目前你在网上和实体书店还买不到这本书,不过我已经提前拿到了,并且仔细 阅读了几天。
相对于上一本书,此书可作为Html5 Canvas编程的进阶书来读,同时可以作为HTML5游戏编程 的入门宝典来长期翻阅。
大师与普通人的区别,不仅仅在于能力的高低,更重要的是能把知识讲明白,真正做到传道、 授业、解惑。 这本书做到了。
本书是为希望使用HTML5进行2D游戏开发,且具备一定JavaScript编程经验的开发人员而准备的。在本书中,笔者从零开始完整讲解了一个复杂的横向卷轴平台视频游戏的开发过程,并将该视频游戏命名为“Snail Bait”。在开发过程中,笔者没有使用任何第三方图形框架或游戏框架,因此读者将从本书中学会以编程方式实现平滑动画、sprite爆炸、开发人员后门程序、游戏难易度设计等所有内容。如果读者正在使用某个游戏框架开发游戏,那么本书对于帮助读者理解游戏框架内部的工作原理也同样大有裨益。
出于教学目的,Snail Bait游戏仅实现了一个关卡,然而它却具备了街机风格游戏的全部特点。Snail Bait游戏在滚动的背景上同时操作多个动画对象,即sprite对象,在播放游戏背景音乐的同时添加多种音频效果。sprite对象具备多种行为,包括但不限于跑动、跳跃、飞行、闪光、弹跳、来回移动、爆炸、碰撞、平台着陆、从游戏画面底部跌落等。
另外,Snail Bait游戏还实现了多个特色功能。例如,一个可以减慢或加快游戏整体速度的时间系统;游戏加载过程动画;当游戏主角失去生命时,震动游戏画面的特殊效果;模拟烟雾和燃烧的粒子系统等。当游戏窗口失去焦点时,Snail Bait游戏会暂停运行,而当游戏窗口重新获得焦点时,Snail Bait游戏会以一个倒计时动画作为开始,以便玩家有时间来恢复对游戏的控制。
虽然没有使用游戏框架或图形框架,但是Snail Bait游戏使用Node.js和socket.io技术实现了将游戏中的一些指标数据发送到服务器端、高分存储和检索,并在游戏窗口顶部显示高分榜等功能。当游戏运行缓慢时,Snail Bait游戏还将显示警告信息。而当按下“Ctrl+D”组合键启动游戏时,Snail Bait游戏将启动开发人员后门程序,从而赋予操作人员特殊权限,例如修改时间轴的流动,或者显示sprite对象碰撞检测矩形以及其他功能等。
当Snail Bait游戏检测到自己运行在移动设备上时,将通过调用触摸事件处理句柄、调整游戏窗口大小来重新配置自身,以便适应移动设备的屏幕大小及控制方式。
游戏编程一直以来是我练习编程技能的最佳训练方法。因为哪怕一个小小的游戏,你也要考虑 程序的架构,考虑分层和解耦,考虑消息传递,考虑绘图,考虑动画,考虑网络,考虑性能, 考虑交互,多媒体处理,多线程等等。游戏编程,往往需要我们在某一方面做到极致,对编程者 的磨练是相当大的。从一个小游戏的编写中,我们能系统学习很多知识和技巧。
以上是我极力推荐此书的原因,此书不难,只要你用心,都能看懂,而且作者还配备了视频教程。 更主要的原因是作者写的足够好!
两本经典,各一本送给大家,每人只能得其中一本。参与方式如下:
0. 微信扫描关注 玄魂工作室 (xuanhun521)
1.如果你可以写出HTML5 Canvas 相关的优秀文章,请在微信订阅号本文下面留言投稿给我。如果你的稿件被采纳,我会立即送书一本。
2.随机打赏,并在此文章下留言。我会随机抽取幸运者。
机械工业出版社华章图书在赠书给玄魂工作室的读者之外,还给了我全网最低价的购书优惠, 大家通过我可以以 75折+5元邮费的方式买到这两本书。如果你想购买,微信订阅号(玄魂521)文章下留言就好。 这是我个人独享的优惠,没有任何中间利润,如果你有更便宜的方式买,也请推荐给我,但不要说三道四,无中生有。
两本书的定价均为 人民币99元。
于刚接触这项技术的小白来说,对HTML5还不能清晰的认识,想入门又不知道该从何处下手,本文将整理几本关于HTML5的书籍,希望对大家有所帮助。
1、《Head First HTML5 Programming(中文版)》
Head First系列的书籍已经推荐过很多次了,的确很适合新手入门阅读,在这本书中你将会了解HTML5新API的基础知识,并学习这些API如何与你的页面交互,JavaScript如何为这些API助一臂之力,以及如何使用这些API来构建让你的老板和朋友对你刮目相看的Web应用。
2、《HTML5权威指南》
是系统学习网页设计的权威参考图书,第一部分将会像你解释HTML5相关的基础知识以及新功能,第二部分讨论HTML 元素,并详细说明了HTML5中新增和修改的元素;第三部分阐述CSS,涵盖了所有控制内容样式的CSS 选择器和属性,并辅以大量代码示例和图示;第四部分介绍DOM,剖析如何用JavaScript 操纵HTML 内容;第五部分讲解Ajax、多媒体和canvas 元素等HTML5 高级特性。
3、《HTML5高级程序设计》
本书介绍了几乎所有主要的HTML 5特性,除了常见的Canvas、VideoAudio、Geolocation之外,还包括后台处理特性Web Workers、全双工通信WebSockets等泛HTML5的技术,内容非常全面,读者可以通过这本书对HTML 5的各个知识点有一个完整的了解。
4、《HTML5秘籍》
本书是一本让你通俗了解HTML5新技术的一本好书。书中从基础的HTML5新标签、音视频,画布功能、HTML5支持的CSS3功能等进行讲解,最后还讲解了几个很适用的就是离线应用,地理位置,服务端通信等等,此外,文中示例代码都十分通俗易懂,相信只要你认真去学都能有所收获。
5、《HTML5 实战》
本书是一本全面介绍运用HTML5开发Web应用的书籍,包括了数据存储、通信以及如何创建视频游戏等诸多内容。本书内容结构清晰,示例完整,适合于对JavaScript和HTML语法有一定基础的Web开发人员阅读。
6、《HTML5 and CSS3 All-in-One For Dummies》
HTML5和CSS3是创建动态网站的必备工具,拥有更新和增强功能,可以使你的网站更加独特。这个友好的一体化指南涵盖了你需要了解的有关这些技术及其最新版本的所有信息。这个新版本以前两个版本的为基础,向介绍HTML5和CSS3的基础知识,然后介绍如何使用它们与JavaScript,MySQL和Ajax一起创建网站。
7、《Developing Mobile Websites with HTML5》
作者David Karlins将美学和技术结合在一本书中,该书适合各个级别的设计师阅读,涵盖构建动画和交互式移动网络应用程序,理解和应用样式到移动网站,创建移动设备 - 友好的表单和从用户收集数据,以及使用JavaScript库,JavaScript小部件和层叠样式表(CSS)。在当今快速发展的技术市场中,移动设备不是附加设备,而是必不可少的。通过HTML5开发移动网站,开始行动。
8、《HTML5 App商业开发实战教程》
主要围绕HTML5相关技术讲解基于WeX5可视化开发平台的移动WebApp应用程序开发。本书已在多所高校投入教学使用。它的特点是由浅入深、由易到难,将开发技巧、和开发工具结合在一起阐述,同时选取了多个商业项目APP的实战案例进行要点讲解,通俗易懂。
有需要开发工具和学习资料的可以私信小编666!
要:HTML5的Canvas元素称得上HTML5的核心技术所在。而作为一个依靠JavaScript绘制华丽图像的元素,Canvas究竟能够运用在哪些方面的开发?国外开发者Ohad Eder-Pressman为我们给出了8个精彩的答案。
最近在国外问答网站Quora上,许多开发者对于HTML5 Canvas元素的实用性进行了一系列探讨。Canvas非常灵活,能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形。Canvas究竟具体能做些什么?3D3R公司创始人兼CEO Ohad Eder-Pressman的答案十分精彩,我们对其文字进行了翻译和整理,不妨一起来看一看。
图:用Canvas绘制的图形
什么是Canvas?
Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。
Ohad Eder-Pressman
我们能用Canvas做些什么?
1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧,Ohad认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。
2. 图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作,但Ohad认为大家完全可以用Canvas来实现。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。
3. banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。
4. 模拟器:Ohad认为,无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。
5. 远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。
6. 字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。
7. 图形编辑器:Ohad预测,图形编辑器将能够100%基于Web实现。
8. 其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力,运用HTML5技术创造更多价值。
==============================
公众号:春树镇(互联网技术,文化,文学相关)
公众号:微膳食(营养健康养生相关)
研究讨论:互联网技术,php开发,网站建议,app开发,html5开发,设计,小说,电影,美食
*请认真填写需求信息,我们会在24小时内与您取得联系。