整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
兩年多一直在和HTML5 Canvas 打交道，也帶領(lǐng)團(tuán)隊(duì)開發(fā)了世界首款基于HTML5 Canvas 的演示文檔工具---AxeSlide（斧子演示，www.axeslide.com)。在這個(gè)領(lǐng)域也積累了一些 經(jīng)驗(yàn)，希望有機(jī)會(huì)和大家分享。今天是要給大家推薦兩本這方面的書，同時(shí)會(huì)送一本書給大家。
要介紹的第一本書是我學(xué)習(xí)Canvas開發(fā)的入門書——《HTML5 Canvas核心技術(shù)：圖形、動(dòng)畫與游戲開發(fā)》。 此書作者David Geary，中文版譯者為愛飛翔，由機(jī)械工業(yè)出版社出版。
我相信這本書，不僅是我個(gè)人，很多學(xué)習(xí)Html5 Canvas開發(fā)的同學(xué)都是把它當(dāng)做案頭必備。 這本書是HTML5 Canvas領(lǐng)域的標(biāo)桿之作，也是迄今為止該領(lǐng)域內(nèi)容最為全面和深入的著作之一，是公認(rèn)的經(jīng)典、五星級暢銷書、資深技術(shù)專家David Geary力作。它不僅全面講解了canvas元素的API，以及如何利用Canvas進(jìn)行圖形繪制、動(dòng)畫制作、物理效果模擬、碰撞檢測、游戲開發(fā)、移動(dòng)應(yīng)用開發(fā)，還包含大量實(shí)例，可操作性極強(qiáng)。 我們在開發(fā)斧子演示的時(shí)候，從基本的繪圖，圖片，視頻，音頻處理，到動(dòng)畫、文本處理， 所有核心開發(fā)內(nèi)容都能從這本書中獲取知識(shí)和靈感。
《HTML5 Canvas核心技術(shù)：圖形、動(dòng)畫與游戲開發(fā)》共分11章。第1章介紹了canvas元素及如何在網(wǎng)絡(luò)應(yīng)用程序中使用它；第2章深入研究了如何使用Canvas的API進(jìn)行繪制；第3章告訴讀者如何繪制并操作Canvas中的文本；第4章專門講解圖像、圖像的操作及視頻處理；第5章介紹如何實(shí)現(xiàn)平滑的動(dòng)畫效果；第6章講解如何用JavaScript語言來實(shí)現(xiàn)精靈；第7章展示了如何在動(dòng)畫中模擬物理效果；第8章介紹了進(jìn)行碰撞檢測所用的技術(shù)；第9章以一個(gè)簡單但是高效的游戲引擎開始，提供了游戲制作所需的全部支持功能；第10章討論了實(shí)現(xiàn)自定義控件的通用方法；第11章專門講述如何實(shí)現(xiàn)基于Canvas的手機(jī)應(yīng)用程序。
上面的書已經(jīng)成為經(jīng)典，接下來的這本，即將成為經(jīng)典。同樣是大牛David Geary的力作——《HTML5 2D游戲編程核心技術(shù)》。
此書由機(jī)械工業(yè)出版社出版，目前你在網(wǎng)上和實(shí)體書店還買不到這本書，不過我已經(jīng)提前拿到了，并且仔細(xì) 閱讀了幾天。
相對于上一本書，此書可作為Html5 Canvas編程的進(jìn)階書來讀，同時(shí)可以作為HTML5游戲編程 的入門寶典來長期翻閱。
大師與普通人的區(qū)別，不僅僅在于能力的高低，更重要的是能把知識(shí)講明白，真正做到傳道、 授業(yè)、解惑。 這本書做到了。
本書是為希望使用HTML5進(jìn)行2D游戲開發(fā)，且具備一定JavaScript編程經(jīng)驗(yàn)的開發(fā)人員而準(zhǔn)備的。在本書中，筆者從零開始完整講解了一個(gè)復(fù)雜的橫向卷軸平臺(tái)視頻游戲的開發(fā)過程，并將該視頻游戲命名為“Snail Bait”。在開發(fā)過程中，筆者沒有使用任何第三方圖形框架或游戲框架，因此讀者將從本書中學(xué)會(huì)以編程方式實(shí)現(xiàn)平滑動(dòng)畫、sprite爆炸、開發(fā)人員后門程序、游戲難易度設(shè)計(jì)等所有內(nèi)容。如果讀者正在使用某個(gè)游戲框架開發(fā)游戲，那么本書對于幫助讀者理解游戲框架內(nèi)部的工作原理也同樣大有裨益。
出于教學(xué)目的，Snail Bait游戲僅實(shí)現(xiàn)了一個(gè)關(guān)卡，然而它卻具備了街機(jī)風(fēng)格游戲的全部特點(diǎn)。Snail Bait游戲在滾動(dòng)的背景上同時(shí)操作多個(gè)動(dòng)畫對象，即sprite對象，在播放游戲背景音樂的同時(shí)添加多種音頻效果。sprite對象具備多種行為，包括但不限于跑動(dòng)、跳躍、飛行、閃光、彈跳、來回移動(dòng)、爆炸、碰撞、平臺(tái)著陸、從游戲畫面底部跌落等。
另外，Snail Bait游戲還實(shí)現(xiàn)了多個(gè)特色功能。例如，一個(gè)可以減慢或加快游戲整體速度的時(shí)間系統(tǒng)；游戲加載過程動(dòng)畫；當(dāng)游戲主角失去生命時(shí)，震動(dòng)游戲畫面的特殊效果；模擬煙霧和燃燒的粒子系統(tǒng)等。當(dāng)游戲窗口失去焦點(diǎn)時(shí)，Snail Bait游戲會(huì)暫停運(yùn)行，而當(dāng)游戲窗口重新獲得焦點(diǎn)時(shí)，Snail Bait游戲會(huì)以一個(gè)倒計(jì)時(shí)動(dòng)畫作為開始，以便玩家有時(shí)間來恢復(fù)對游戲的控制。
雖然沒有使用游戲框架或圖形框架，但是Snail Bait游戲使用Node.js和socket.io技術(shù)實(shí)現(xiàn)了將游戲中的一些指標(biāo)數(shù)據(jù)發(fā)送到服務(wù)器端、高分存儲(chǔ)和檢索，并在游戲窗口頂部顯示高分榜等功能。當(dāng)游戲運(yùn)行緩慢時(shí)，Snail Bait游戲還將顯示警告信息。而當(dāng)按下“Ctrl+D”組合鍵啟動(dòng)游戲時(shí)，Snail Bait游戲?qū)?dòng)開發(fā)人員后門程序，從而賦予操作人員特殊權(quán)限，例如修改時(shí)間軸的流動(dòng)，或者顯示sprite對象碰撞檢測矩形以及其他功能等。
當(dāng)Snail Bait游戲檢測到自己運(yùn)行在移動(dòng)設(shè)備上時(shí)，將通過調(diào)用觸摸事件處理句柄、調(diào)整游戲窗口大小來重新配置自身，以便適應(yīng)移動(dòng)設(shè)備的屏幕大小及控制方式。
游戲編程一直以來是我練習(xí)編程技能的最佳訓(xùn)練方法。因?yàn)槟呐乱粋€(gè)小小的游戲，你也要考慮 程序的架構(gòu)，考慮分層和解耦，考慮消息傳遞，考慮繪圖，考慮動(dòng)畫，考慮網(wǎng)絡(luò)，考慮性能， 考慮交互，多媒體處理，多線程等等。游戲編程，往往需要我們在某一方面做到極致，對編程者 的磨練是相當(dāng)大的。從一個(gè)小游戲的編寫中，我們能系統(tǒng)學(xué)習(xí)很多知識(shí)和技巧。
以上是我極力推薦此書的原因，此書不難，只要你用心，都能看懂，而且作者還配備了視頻教程。 更主要的原因是作者寫的足夠好！
兩本經(jīng)典，各一本送給大家，每人只能得其中一本。參與方式如下：
0. 微信掃描關(guān)注 玄魂工作室 （xuanhun521）
1.如果你可以寫出HTML5 Canvas 相關(guān)的優(yōu)秀文章，請?jiān)谖⑿庞嗛喬柋疚南旅媪粞酝陡褰o我。如果你的稿件被采納,我會(huì)立即送書一本。
2.隨機(jī)打賞，并在此文章下留言。我會(huì)隨機(jī)抽取幸運(yùn)者。
機(jī)械工業(yè)出版社華章圖書在贈(zèng)書給玄魂工作室的讀者之外，還給了我全網(wǎng)最低價(jià)的購書優(yōu)惠， 大家通過我可以以 75折+5元郵費(fèi)的方式買到這兩本書。如果你想購買，微信訂閱號（玄魂521）文章下留言就好。 這是我個(gè)人獨(dú)享的優(yōu)惠，沒有任何中間利潤，如果你有更便宜的方式買，也請推薦給我，但不要說三道四，無中生有。
兩本書的定價(jià)均為 人民幣99元。
于剛接觸這項(xiàng)技術(shù)的小白來說，對HTML5還不能清晰的認(rèn)識(shí)，想入門又不知道該從何處下手，本文將整理幾本關(guān)于HTML5的書籍，希望對大家有所幫助。
1、《Head First HTML5 Programming（中文版）》
Head First系列的書籍已經(jīng)推薦過很多次了，的確很適合新手入門閱讀，在這本書中你將會(huì)了解HTML5新API的基礎(chǔ)知識(shí)，并學(xué)習(xí)這些API如何與你的頁面交互，JavaScript如何為這些API助一臂之力，以及如何使用這些API來構(gòu)建讓你的老板和朋友對你刮目相看的Web應(yīng)用。
2、《HTML5權(quán)威指南》
是系統(tǒng)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的權(quán)威參考圖書，第一部分將會(huì)像你解釋HTML5相關(guān)的基礎(chǔ)知識(shí)以及新功能，第二部分討論HTML 元素，并詳細(xì)說明了HTML5中新增和修改的元素；第三部分闡述CSS，涵蓋了所有控制內(nèi)容樣式的CSS 選擇器和屬性，并輔以大量代碼示例和圖示；第四部分介紹DOM，剖析如何用JavaScript 操縱HTML 內(nèi)容；第五部分講解Ajax、多媒體和canvas 元素等HTML5 高級特性。
3、《HTML5高級程序設(shè)計(jì)》
本書介紹了幾乎所有主要的HTML 5特性，除了常見的Canvas、VideoAudio、Geolocation之外，還包括后臺(tái)處理特性Web Workers、全雙工通信WebSockets等泛HTML5的技術(shù)，內(nèi)容非常全面，讀者可以通過這本書對HTML 5的各個(gè)知識(shí)點(diǎn)有一個(gè)完整的了解。
4、《HTML5秘籍》
本書是一本讓你通俗了解HTML5新技術(shù)的一本好書。書中從基礎(chǔ)的HTML5新標(biāo)簽、音視頻，畫布功能、HTML5支持的CSS3功能等進(jìn)行講解，最后還講解了幾個(gè)很適用的就是離線應(yīng)用，地理位置，服務(wù)端通信等等，此外，文中示例代碼都十分通俗易懂，相信只要你認(rèn)真去學(xué)都能有所收獲。
5、《HTML5 實(shí)戰(zhàn)》
本書是一本全面介紹運(yùn)用HTML5開發(fā)Web應(yīng)用的書籍，包括了數(shù)據(jù)存儲(chǔ)、通信以及如何創(chuàng)建視頻游戲等諸多內(nèi)容。本書內(nèi)容結(jié)構(gòu)清晰，示例完整，適合于對JavaScript和HTML語法有一定基礎(chǔ)的Web開發(fā)人員閱讀。
6、《HTML5 and CSS3 All-in-One For Dummies》
HTML5和CSS3是創(chuàng)建動(dòng)態(tài)網(wǎng)站的必備工具，擁有更新和增強(qiáng)功能，可以使你的網(wǎng)站更加獨(dú)特。這個(gè)友好的一體化指南涵蓋了你需要了解的有關(guān)這些技術(shù)及其最新版本的所有信息。這個(gè)新版本以前兩個(gè)版本的為基礎(chǔ)，向介紹HTML5和CSS3的基礎(chǔ)知識(shí)，然后介紹如何使用它們與JavaScript，MySQL和Ajax一起創(chuàng)建網(wǎng)站。
7、《Developing Mobile Websites with HTML5》
作者David Karlins將美學(xué)和技術(shù)結(jié)合在一本書中，該書適合各個(gè)級別的設(shè)計(jì)師閱讀，涵蓋構(gòu)建動(dòng)畫和交互式移動(dòng)網(wǎng)絡(luò)應(yīng)用程序，理解和應(yīng)用樣式到移動(dòng)網(wǎng)站，創(chuàng)建移動(dòng)設(shè)備 - 友好的表單和從用戶收集數(shù)據(jù)，以及使用JavaScript庫，JavaScript小部件和層疊樣式表（CSS）。在當(dāng)今快速發(fā)展的技術(shù)市場中，移動(dòng)設(shè)備不是附加設(shè)備，而是必不可少的。通過HTML5開發(fā)移動(dòng)網(wǎng)站，開始行動(dòng)。
8、《HTML5 App商業(yè)開發(fā)實(shí)戰(zhàn)教程》
主要圍繞HTML5相關(guān)技術(shù)講解基于WeX5可視化開發(fā)平臺(tái)的移動(dòng)WebApp應(yīng)用程序開發(fā)。本書已在多所高校投入教學(xué)使用。它的特點(diǎn)是由淺入深、由易到難，將開發(fā)技巧、和開發(fā)工具結(jié)合在一起闡述，同時(shí)選取了多個(gè)商業(yè)項(xiàng)目APP的實(shí)戰(zhàn)案例進(jìn)行要點(diǎn)講解，通俗易懂。
有需要開發(fā)工具和學(xué)習(xí)資料的可以私信小編666!
要：HTML5的Canvas元素稱得上HTML5的核心技術(shù)所在。而作為一個(gè)依靠JavaScript繪制華麗圖像的元素，Canvas究竟能夠運(yùn)用在哪些方面的開發(fā)？國外開發(fā)者Ohad Eder-Pressman為我們給出了8個(gè)精彩的答案。
最近在國外問答網(wǎng)站Quora上，許多開發(fā)者對于HTML5 Canvas元素的實(shí)用性進(jìn)行了一系列探討。Canvas非常靈活，能夠很好地融合JavaScript代碼并在瀏覽器內(nèi)繪制華麗的圖形。Canvas究竟具體能做些什么？3D3R公司創(chuàng)始人兼CEO Ohad Eder-Pressman的答案十分精彩，我們對其文字進(jìn)行了翻譯和整理，不妨一起來看一看。
圖：用Canvas繪制的圖形
什么是Canvas？
Canvas元素是HTML5的一部分，允許腳本語言動(dòng)態(tài)渲染位圖像。Canvas由一個(gè)可繪制地區(qū)HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼可以訪問該地區(qū)，通過一套完整的繪圖功能類似于其他通用二維的API，從而生成動(dòng)態(tài)的圖形。
Ohad Eder-Pressman
我們能用Canvas做些什么？
1. 游戲：毫無疑問，游戲在HTML5領(lǐng)域具有舉足輕重的地位。HTML5在基于Web的圖像顯示方面比Flash更加立體、更加精巧，Ohad認(rèn)為運(yùn)用Canvas制作的圖像能夠令HTML5游戲在流暢度和跨平臺(tái)方面發(fā)揮更大的潛力。
2. 圖表制作：圖表制作時(shí)常被人們忽略，但無論企業(yè)內(nèi)部還是企業(yè)間交流合作都離不開圖表。現(xiàn)在一些開發(fā)者使用HTML/CSS完成圖標(biāo)制作，但Ohad認(rèn)為大家完全可以用Canvas來實(shí)現(xiàn)。當(dāng)然，使用SVG（可縮放矢量圖形）來完成圖表制作也是非常好的方法。
3. banner廣告：Flash曾經(jīng)輝煌的時(shí)代，智能手機(jī)還未曾出現(xiàn)。現(xiàn)在以及未來的智能機(jī)時(shí)代，HTML5技術(shù)能夠在banner廣告上發(fā)揮巨大作用，用Canvas實(shí)現(xiàn)動(dòng)態(tài)的廣告效果再合適不過。
4. 模擬器：Ohad認(rèn)為，無論從視覺效果還是核心功能方面來說，模擬器產(chǎn)品可以完全由JavaScript來實(shí)現(xiàn)。
5. 遠(yuǎn)程計(jì)算機(jī)控制：Canvas可以讓開發(fā)者更好地實(shí)現(xiàn)基于Web的數(shù)據(jù)傳輸，構(gòu)建一個(gè)完美的可視化控制界面。
6. 字體設(shè)計(jì)：對于字體的自定義渲染將完全可以基于Web，使用HTML5技術(shù)進(jìn)行實(shí)現(xiàn)。
7. 圖形編輯器：Ohad預(yù)測，圖形編輯器將能夠100%基于Web實(shí)現(xiàn)。
8. 其他可嵌入網(wǎng)站的內(nèi)容：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。Ohad呼吁大家繼續(xù)挖掘Canvas的潛力，運(yùn)用HTML5技術(shù)創(chuàng)造更多價(jià)值。
==============================
公眾號：春樹鎮(zhèn)（互聯(lián)網(wǎng)技術(shù)，文化，文學(xué)相關(guān)）
公眾號：微膳食（營養(yǎng)健康養(yǎng)生相關(guān)）
研究討論：互聯(lián)網(wǎng)技術(shù)，php開發(fā)，網(wǎng)站建議，app開發(fā)，html5開發(fā)，設(shè)計(jì)，小說，電影，美食
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
