HTML5 Canvas Cookbook

Over 80 recipes to revolutionize the Web experience with HTML5 Canvas

• The quickest way to get up to speed with HTML5 Canvas application and game development
• Create stunning 3D visualizations and games without Flash
• Written in a modern, unobtrusive, and objected oriented JavaScript style so that the code can be reused in your own applications.
• Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

In Detail

The HTML5 canvas is revolutionizing graphics and visualizations on the Web. Powered by JavaScript, the HTML5 Canvas API enables web developers to create visualizations and animations right in the browser for the first time without Flash. HTML5 Canvas is being considered as the future of graphics and interactivity on the Web and yet most developers fail to exercise all of the features that this powerful technology has to offer.

HTML5 Canvas Cookbook covers the fundamental methods and properties of the HTML5 canvas API. As soon as you are familiar with the API, the book provides advanced techniques for handling animations, image and video manipulations, canvas interactivity, data visualizations, game development, 3D modeling, and more.

HTML5 Canvas Cookbook begins by covering the basics of the HTML5 Canvas API and then provides techniques for handling features not directly supported by the API such as animations and canvas interactivity. It winds up by providing detailed templates for a few of the most common HTML5 canvas applications - data visualization, game development, and 3D modeling. It will acquaint you with interesting topics such as fractals, principles of animation, physics, color models, matrix mathematics, and 3D projection.

By the end of this book, you will have a solid understanding of the HTML5 canvas API and a toolbox of techniques for creating any type of HTML5 Canvas application, limited only by the extent of your imagination.

What you will learn from this book

• Learn about the fundamentals of line drawing, text drawing, shape drawing, composites, and picture drawing.
• Animate linear motions, accelerations, and oscillations, and create a particle physics simulator.
• Work with images, video, and pixel manipulation.
• Apply transformation effects including translations, scaling, rotations, and shearing.
• Create interactive HTML5 canvas applications using mouse coordinate detection, pixel detection, rectangular region detection, and path detection techniques.
• Construct data visualizations with graphs and charts.
• Develop your own HTML5 canvas games.
• Create stunning 3D visualizations with JavaScript libraries and WebGL.

Approach

Written in cookbook style, this book offers a wide array of techniques for building HTML5 Canvas applications. Each recipe contains step-by-step instructions followed by analysis of what was done in each task and other useful information. The book is designed so that you can read it chapter by chapter, or you can look at the list of recipes and refer to them in no particular order.

Who this book is written for

This book is geared towards web developers who are familiar with HTML and JavaScript. It is written for both beginners and seasoned HTML5 developers with a good working knowledge of JavaScript.

超過80個食譜，以HTML5 Canvas革命化網頁體驗
- 快速掌握HTML5 Canvas應用程式和遊戲開發的最快方法
- 在沒有Flash的情況下創建令人驚嘆的3D視覺效果和遊戲
- 以現代、不顯眼和面向對象的JavaScript風格撰寫，以便在您自己的應用程式中重複使用代碼
- Packt的食譜系列的一部分：每個食譜都是一系列精心組織的指令，以盡可能高效地完成任務

詳細內容
HTML5 Canvas正在革新網頁上的圖形和視覺效果。由JavaScript驅動，HTML5 Canvas API使網頁開發人員能夠首次在瀏覽器中創建視覺效果和動畫，而無需使用Flash。HTML5 Canvas被認為是網頁上圖形和互動性的未來，然而大多數開發人員未能充分利用這項強大技術所提供的所有功能。

HTML5 Canvas Cookbook涵蓋了HTML5 Canvas API的基本方法和屬性。一旦您熟悉了API，本書將提供處理動畫、圖像和視頻操作、Canvas互動性、數據可視化、遊戲開發、3D建模等高級技術。

HTML5 Canvas Cookbook首先介紹了HTML5 Canvas API的基礎知識，然後提供了處理API不直接支持的功能（如動畫和Canvas互動性）的技術。最後，它提供了一些最常見的HTML5 Canvas應用程式的詳細模板-數據可視化、遊戲開發和3D建模。它將使您熟悉有趣的主題，如分形、動畫原理、物理學、顏色模型、矩陣數學和3D投影。

通過閱讀本書，您將對HTML5 Canvas API有扎實的理解，並擁有一套技術工具箱，可創建任何類型的HTML5 Canvas應用程式，僅受您想像力的限制。

本書的學習重點：
- 了解線條繪製、文字繪製、形狀繪製、合成和圖片繪製的基本知識。
- 創建線性運動、加速度和振動的動畫，並創建粒子物理模擬器。
- 使用圖像、視頻和像素操作。
- 應用變換效果，包括平移、縮放、旋轉和剪切。
- 使用滑鼠座標檢測、像素檢測、矩形區域檢測和路徑檢測技術創建互動式HTML5 Canvas應用程式。
- 使用圖表和圖表構建數據可視化。
- 開發自己的HTML5 Canvas遊戲。
- 使用JavaScript庫和WebGL創建令人驚嘆的3D視覺效果。

方法
本書以食譜風格撰寫，提供了各種構建HTML5 Canvas應用程式的技術。每個食譜都包含逐步指示，然後分析每個任務中所做的工作和其他有用的信息。本書設計成可以按章節閱讀，也可以查看食譜列表，無需特定順序。

本書的讀者
本書適合熟悉HTML和JavaScript的網頁開發人員。無論是初學者還是有豐富HTML5開發經驗並具備良好的JavaScript工作知識的開發人員，都可以從本書中獲益。