
HTML5 Canvas
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
More details
Other editions
Additional 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
File format: PDF
Copy-Protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our eBook Help page.