赠书:HTML5 Canvas 2d 编程必读的两本经典

赠书:HTML5 Canvas 2d 编程必读的两本经典

这两年多一直在和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元邮费的方式买到这两本书。如果你想购买,直接文章下留言就好。 这是我个人独享的优惠,没有任何中间利润,如果你有更便宜的方式买,也请推荐给我,但不要说三道四,无中生有。

两本书的定价均为 人民币99元。



赠书:HTML5 Canvas 2d 编程必读的两本经典

时间: 2024-12-18 01:01:13

赠书:HTML5 Canvas 2d 编程必读的两本经典的相关文章

HTML5 Canvas绚丽的小球详解

实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 主要分为两个部分: 静态布局:小球的设计,包括小球的位置.颜色.大小和大小变化情况等,初始化小球的函数,渲染函数,Update函数 动态主体:变量.数组的的定义,小球显示时长定时,鼠标移动触发小球运动的函数 代码部分: canvas标签,提供绘图的画布 js逻辑:静态小球 其中,_init()函数

开源HTML5 Canvas游戏Runtime发布

Cantk-Runtime是通用的HTML5 Canvas 2D游戏引擎运行库,让HTML5游戏的性能飞起来.Cantk-Runtime以PhoneGap插件的方式提供,从此结束PhoneGap低性能的恶名! Cantk-Runtime提供高效的HTML5 Canvas绘图API.兼容HTML5 Audio的游音乐/音效播放接口和原生的编辑器接口, 让HTML5 Canvas 2D游戏只需要简单的适配就可以跑起来. 欢迎加入QQ群 :223466431 特色 0.开源.开放全部源码,可用于商业和

HTML5 Canvas ( 扩展context('2d') ) CanvasRenderingContext2D.prototype.你的方法名

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="text/javascript" src="../js/jQuery.js"></script> <style type="text/css">

HTML5 Canvas getcontext 2d

在使用 Canvas.getContext(contextID)时,取得2d上下文开始使用 Canvas.getContext("2D"),发现不能取到对象,改为 Canvas.getContext("2d")后,结果正常. getContext方法参数对大小写敏感.以后需注意. HTML5 Canvas getcontext 2d

HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制图片 绘制文本 相关要求 环境要求:Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器 编程要求:需要有基础的HTML和Javascript编程经验,相关的画布编程将调用Javascript API来处理 HTML Canvas基本元素 HTM

HTML5 canvas 绘制精美的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范.它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频.视频.图形.数据存储.内容呈现,等等.本文主要关注图形方面的增强:canvas. 新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具.跨

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

如何使用 HTML5 Canvas 制作水波纹效果

原文:如何使用 HTML5 Canvas 制作水波纹效果 今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能. 在线演示      源码下载 Step 1. HTML 和以前一样,首先是 HTML 代码: <!DOCTYPE html> <html> <head> <meta