HTML5 Canvas

Name: HTML5 Canvas | Native Interactivity and Animation for the Web
Brand: O'Reilly
Price: 41.49 EUR
Availability: OnlineOnly

Native Interactivity and Animation for the Web

Steve Fulton(Author)

O'Reilly (Publisher)

Published on 11. April 2013

750 pages

E-Book

PDF with Adobe-DRM

System requirements

978-1-4493-3588-5 (ISBN)

€41.49incl. 7% vat

System requirements

for PDF with Adobe-DRM

E-Book Single Licence

Available for download

Description

More details

Other editions

Content

Intro
Copyright
Table of Contents
Preface
Introduction to the Second Edition
First Edition Updates
What You Need to Run the Examples in the Book
What You Need to Know
How This Book Is Organized
Conventions Used in This Book
Using Code Examples
Safari® Books Online
How to Contact Us
Acknowledgments
Steve Fulton
Jeff Fulton
Chapter 1. Introduction to HTML5 Canvas
What Is HTML5?
The Basic HTML5 Page
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&...&/title&
A Simple HTML5 Page
Basic HTML We Will Use in This Book
÷&
&canvas&
The Document Object Model (DOM) and Canvas
JavaScript and Canvas
Where Does JavaScript Go and Why?
HTML5 Canvas "Hello World!"
Encapsulating Your JavaScript Code for Canvas
Adding Canvas to the HTML Page
Using the document Object to Reference the Canvas Element in JavaScript
Testing to See Whether the Browser Supports Canvas
Retrieving the 2D Context
The drawScreen() Function
Debugging with console.log
The 2D Context and the Current State
The HTML5 Canvas Object
Another Example: Guess The Letter
How the Game Works
The "Guess The Letter" Game Variables
The initGame() Function
The eventKeyPressed() Function
The drawScreen() Function
Exporting Canvas to an Image
The Final Game Code
Hello World Animated Edition
Some Necessary Properties
Animation Loop
Alpha Transparency with the globalAlpha Property
Clearing and Displaying the Background
Updating the globalAlpha Property for Text Display
Drawing the Text
HTML5 Canvas and Accessibility: Sub Dom
Hit Testing Proposal
What's Next?
Chapter 2. Drawing on the Canvas
The Basic File Setup for This Chapter
The Basic Rectangle Shape
The Canvas State
What's Not Part of the State?
How Do We Save and Restore the Canvas State?
Using Paths to Create Lines
Starting and Ending a Path
The Actual Drawing
Examples of More Advanced Line Drawing
Advanced Path Methods
Arcs
Bezier Curves
The Canvas Clipping Region
Compositing on the Canvas
Simple Canvas Transformations
Rotation and Translation Transformations
Scale Transformations
Combining Scale and Rotation Transformations
Filling Objects with Colors and Gradients
Setting Basic Fill Colors
Filling Shapes with Gradients
Filling Shapes with Patterns
Creating Shadows on Canvas Shapes
Methods to Clear the Canvas
Simple Fill
Resetting the Canvas Width and Height
Resetting the Canvas clearRect Function
Checking to See Whether a Point Is in the Current Path
Drawing a Focus Ring
What's Next?
Chapter 3. The HTML5 Canvas Text API
Canvas Text and CSS
Displaying Basic Text
Basic Text Display
Handling Basic Text in Text Arranger
Communicating Between HTML Forms and the Canvas
Using measureText
fillText and strokeText
Setting the Text Font
Font Size, Face, Weight, and Style Basics
Handling Font Size and Face in Text Arranger
Font Color
Font Baseline and Alignment
Text Arranger Version 2.0
Text and the Canvas Context
Global Alpha and Text
Global Shadows and Text
Text with Gradients and Patterns
Linear Gradients and Text
Radial Gradients and Text
Image Patterns and Text
Handling Gradients and Patterns in Text Arranger
Width, Height, Scale, and toDataURL() Revisited
Dynamically Resizing the Canvas
Dynamically Scaling the Canvas
The toDataURL() Method of the Canvas Object
Final Version of Text Arranger
Animated Gradients
The Future of Text on the Canvas
CSS Text
Making Text Accessible
What's Next?
Chapter 4. Images on the Canvas
The Basic File Setup for This Chapter
Image Basics
Preloading Images
Displaying an Image on the Canvas with drawImage()
Resizing an Image Painted to the Canvas
Copying Part of an Image to the Canvas
Simple Cell-Based Sprite Animation
Creating an Animation Frame Counter
Creating a Timer Loop
Changing the Tile to Display
Advanced Cell-Based Animation
Examining the Tile Sheet
Creating an Animation Array
Choosing the Tile to Display
Looping Through the Tiles
Drawing the Tile
Moving the Image Across the Canvas
Applying Rotation Transformations to an Image
Canvas Transformation Basics
Animating a Transformed Image
Creating a Grid of Tiles
Defining a Tile Map
Creating a Tile Map with Tiled
Displaying the Map on the Canvas
Diving into Drawing Properties with a Large Image
Creating a Window for the Image
Drawing the Image Window
Changing the ViewPort Property of the Image
Changing the Image Source Scale
Panning to a Spot on the Source Image
Pan and Scale in the Same Operation
Pixel Manipulation
The Canvas Pixel Manipulation API
Application Tile Stamper
Copying from One Canvas to Another
Using Pixel Data to Detect Object Collisions
The Colliding Objects
How We Will Test Collisions
Checking for Intersection Between Two Objects
What's Next?
Chapter 5. Math, Physics, and Animation
Moving in a Straight Line
Moving Between Two Points: The Distance of a Line
Moving on a Vector
Bouncing Off Walls
Bouncing a Single Ball
Multiple Balls Bouncing Off Walls
Multiple Balls Bouncing with a Dynamically Resized Canvas
Multiple Balls Bouncing and Colliding
Multiple Balls Bouncing with Friction
Curve and Circular Movement
Uniform Circular Motion
Moving in a Simple Spiral
Cubic Bezier Curve Movement
Moving an Image
Creating a Cubic Bezier Curve Loop
Simple Gravity, Elasticity, and Friction
Simple Gravity
Simple Gravity with a Bounce
Gravity with Bounce and Applied Simple Elasticity
Simple Gravity, Simple Elasticity, and Simple Friction
Easing
Easing Out (Landing the Ship)
Easing In (Taking Off)
Box2D and the Canvas
Downloading Box2dWeb
How Does Box2dWeb Work?
Box2D Hello World
Including the Library
Creating a Box2dWeb World
Units in Box2dWeb
Defining the Walls in Box2D
Creating Balls
Rendering b2debugDraw vs. Canvas Rendering
drawScreen()
Bouncing Balls Revisited
Translating to the Canvas
Interactivity with Box2D
Creating the Boxes
Rendering the Boxes
Adding Interactivity
Creating Boxes
Handling the Balls
Box2D Further Reading
What's Next?
Chapter 6. Mixing HTML5 Video and Canvas
HTML5 Video Support
Theora + Vorbis = .ogg
H.264 + $$$ = .mp4
VP8 + Vorbis = .webm
Combining All Three
Converting Video Formats
Basic HTML5 Video Implementation
Plain-Vanilla Video Embed
Video with Controls, Loop, and Autoplay
Altering the Width and Height of the Video
Preloading Video in JavaScript
Video and the Canvas
Displaying a Video on HTML5 Canvas
HTML5 Video Properties
Video on the Canvas Examples
Using the currentTime Property to Create Video Events
Canvas Video Transformations: Rotation
Canvas Video Puzzle
Creating Video Controls on the Canvas
Animation Revisited: Moving Videos
Capturing Video with JavaScript
Web RTC Media Capture and Streams API
Example 1: Show Video
Example 2: Put Video on the Canvas and Take a Screenshot
Example 3: Create a Video Puzzle out of User-Captured Video
Video and Mobile
What's Next?
Chapter 7. Working with Audio
The Basic &audio& Tag
Audio Formats
Supported Formats
Audacity
Example: Using All Three Formats
Audio Tag Properties, Functions, and Events
Audio Functions
Important Audio Properties
Important Audio Events
Loading and Playing the Audio
Displaying Attributes on the Canvas
Playing a Sound with No Audio Tag
Dynamically Creating an Audio Element in JavaScript
Finding the Supported Audio Format
Playing the Sound
Look Ma, No Tag!
Creating a Canvas Audio Player
Creating Custom User Controls on the Canvas
Loading the Button Assets
Setting Up the Audio Player Values
Mouse Events
Sliding Play Indicator
Play/Pause Push Button: Hit Test Point Revisited
Loop/No Loop Toggle Button
Click-and-Drag Volume Slider
Case Study in Audio: Space Raiders Game
Why Sounds in Apps Are Different: Event Sounds
Iterations
Space Raiders Game Structure
Iteration #1: Playing Sounds Using a Single Object
Iteration #2: Creating Unlimited Dynamic Sound Objects
Iteration #3: Creating a Sound Pool
Iteration #4: Reusing Preloaded Sounds
Web Audio API
What Is the Web Audio API?
Space Raiders with the Web Audio API Applied
What's Next?
Chapter 8. Canvas Games: Part I
Why Games in HTML5?
Canvas Compared to Flash
What Does Canvas Offer?
Our Basic Game HTML5 File
Our Game's Design
Game Graphics: Drawing with Paths
Needed Assets
Using Paths to Draw the Game's Main Character
Animating on the Canvas
Game Timer Loop
The Player Ship State Changes
Applying Transformations to Game Graphics
The Canvas Stack
Game Graphic Transformations
Rotating the Player Ship from the Center
Alpha Fading the Player Ship
Game Object Physics and Animation
How Our Player Ship Will Move
Controlling the Player Ship with the Keyboard
Giving the Player Ship a Maximum Velocity
A Basic Game Framework
The Game State Machine
The Update/Render (Repeat) Cycle
The FrameRateCounter Object Prototype
Putting It All Together
Geo Blaster Game Structure
Geo Blaster Global Game Variables
The Player Object
Geo Blaster Game Algorithms
Arrays of Logical Display Objects
Level Knobs
Level and Game End
Awarding the Player Extra Ships
Applying Collision Detection
The Geo Blaster Basic Full Source
Rock Object Prototype
Simple A* Path Finding on a Tile Grid
What Is A*?
A* Applied to a Larger Tile Map
A* Taking Diagonal Moves into Account
A* with Node Weights
A* with Node Weights and Diagonals
Moving a Game Character Along the A* Path
Tanks That Pass Through Walls?
What's Next?
Chapter 9. Canvas Games: Part II
Geo Blaster Extended
Geo Blaster Tile Sheet
Rendering the Other Game Objects
Adding Sound
Pooling Object Instances
Adding a Step Timer
Creating a Dynamic Tile Sheet at Runtime
A Simple Tile-Based Game
Micro Tank Maze Description
The Tile Sheet for Our Game
The Playfield
The Player
The Enemy
The Goal
The Explosions
Turn-Based Game Flow and the State Machine
Simple Tile Movement Logic Overview
Rendering Logic Overview
Simple Homegrown AI Overview
Micro Tank Maze Complete Game Code
Scrolling a Tile-Based World
First, a Tile Sheet That Contains the Tiles We Want to Paint to the Screen
Second, a Two-Dimensional Array to Describe Our Game World
Third, Paint the Tile-Based World to the Canvas
Coarse Scrolling vs. Fine Scrolling
The Camera Object
The World Object
Fine Scrolling the Row and Column Buffers
Coarse Scrolling Full Code Example
Fine Scrolling Full Code Example
What's Next?
Chapter 10. Going Mobile!
The First Application
The Code
Examining the Code for BSBingo.html
The Application Code
Scaling the Game for the Browser
Testing the Game on an Actual Device
Retro Blaster Touch
Mobilizing Retro Blaster Touch
Jumping to Full Screen
Touch Move Events
Retro Blaster Touch Complete Game Code
Beyond the Canvas
What's Next?
Chapter 11. Further Explorations
3D with WebGL
What Is WebGL?
How Does One Test WebGL?
How Do I Learn More About WebGL?
What Does a WebGL Application Look Like?
Further Explorations with WebGL
WebGL JavaScript Libraries
Multiplayer Applications with ElectroServer 5
Installing ElectroServer
The Basic Architecture of a Socket-Server Application
The Basic Architecture of an ElectroServer Application
Creating a Chat Application with ElectroServer
Testing the Application in Google Chrome
Further Explorations with ElectroServer
This Is Just the Tip of the Iceberg
Creating a Simple Object Framework for the Canvas
Creating the Drag-and-Drop Application
Application Design
Windows 8 Apps and the HTML5 Canvas
What's Next in HTML5.1 and Canvas Level 2?
HTML5.1 Canvas Context
Canvas Level-2
Conclusion
Appendix A. Full Code Listings
Code from Chapter 7
Code from Chapter 9
Geo Blaster Extended Full Source
Code from Chapter 11
Index
About the Authors

System requirements

Save as PDF Copy link into clipboard

Schweitzer Fachinformationen

HTML5 Canvas

Description

More details

Other editions

Additional editions

Content

System requirements