Book Description
Over 80 recipes to revolutionize the Web experience with HTML5 Canvas with this book and ebook
- 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.
Table of Contents
-
HTML5 Canvas Cookbook
- Table of Contents
- HTML5 Canvas Cookbook
- Credits
- About the Author
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. Getting Started withPaths and Text
-
2. Shape Drawing and Composites
- Introduction
- Drawing a rectangle
- Drawing a circle
- Working with custom shapes and fill styles
- Fun with Bezier curves: drawing a cloud
- Drawing transparent shapes
- Working with the context state stack to save and restore styles
- Working with composite operations
- Creating patterns with loops: drawing a gear
- Randomizing shape properties: drawing a field of flowers
- Creating custom shape functions: playing card suits
- Putting it all together: drawing a jet
-
3. Working with Images and Videos
- Introduction
- Drawing an image
- Cropping an image
- Copying and pasting sections of the canvas
- Working with video
- Getting image data
- Introduction to pixel manipulation: inverting image colors
- Inverting video colors
- Converting image colors to grayscale
- Converting a canvas drawing into a data URL
- Saving a canvas drawing as an image
- Loading the canvas with a data URL
- Creating a pixelated image focus
-
4. Mastering Transformations
- Introduction
- Translating the canvas context
- Rotating the canvas context
- Scaling the canvas context
- Creating a mirror transform
- Creating a custom transform
- Shearing the canvas context
- Handling multiple transforms with the state stack
- Transforming a circle into an oval
- Rotating an image
- Drawing a simple logo and randomizing its position, rotation, and scale
- 5. Bringing the Canvas to Life with Animation
-
6. Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions
- Introduction
- Creating an Events class
- Working with canvas mouse coordinates
- Attaching mouse event listeners to regions
- Attaching touch event listeners to regions on a mobile device
- Attaching event listeners to images
- Dragging-and-dropping shapes
- Dragging-and-dropping images
- Creating an image magnifier
- Creating a drawing application
- 7. Creating Graphs and Charts
-
8. Saving the World with Game Development
- Introduction
- Creating sprite sheets for the heroes and enemies
- Creating level images and boundary maps
- Creating an Actor class for the hero and enemies
- Creating a Level class
- Creating a Health Bar class
- Creating a Controller class
- Creating a Model class
- Creating a View class
- Setting up the HTML document and starting the game
- 9. Introducing WebGL
- A. Detecting Canvas Support
- B. Canvas Security
- C. Additional Topics
- Index