HTML5 Canvas. Native Interactivity and Animation for the Web. 2nd Edition - Helion

ebook

Autor: Steve Fulton, Jeff Fulton
ISBN: 978-14-493-3587-8
stron: 750, Format: ebook
Data wydania: 2013-04-11
Księgarnia: Helion

Cena książki: 152,15 zł (poprzednio: 176,92 zł)
Oszczędzasz: 14% (-24,77 zł)

Osoby, które kupiły tę książkę, wybierały także »

Tagi: HTML i XHTML - Programowanie

Flash is fading fast as Canvas continues to climb. The second edition of this popular book gets you started with HTML5 Canvas by showing you how to build interactive multimedia applications. You’ll learn how to draw, render text, manipulate images, and create animation—all in the course of building an interactive web game throughout the book.

Updated for the latest implementations of Canvas and related HTML5 technologies, this edition includes clear and reusable code examples to help you quickly pick up the basics—whether you currently use Flash, Silverlight, or just HTML and JavaScript. Discover why HTML5 is the future of innovative web development.

Create and modify 2D drawings, text, and bitmap images
Use algorithms for math-based movement and physics interactions
Incorporate and manipulate video, and add audio
Build a basic framework for creating a variety of games
Use bitmaps and tile sheets to develop animated game graphics
Go mobile: build web apps and then modify them for iOS devices
Explore ways to use Canvas for 3D and multiplayer game applications

Osoby które kupowały "HTML5 Canvas. Native Interactivity and Animation for the Web. 2nd Edition", wybierały także:

HTML5. Kurs video. Poziom pierwszy. Programowanie dla początkujących webmasterów 89,00 zł, (26,70 zł -70%)
Tworzenie gier w języku HTML5 dla profesjonalistów. Wydanie II 67,42 zł, (20,90 zł -69%)
HTML 5. Kurs video. Poziom drugi. Tworzenie profesjonalnych stron WWW 89,00 zł, (35,60 zł -60%)
Sass od podstaw. Kurs video. Budowa kompleksowej strony w oparciu o metodologię BEM 47,93 zł, (22,05 zł -54%)
HTML i CSS. Przewodnik dla pocz 69,00 zł, (34,50 zł -50%)

Spis treści

HTML5 Canvas. Native Interactivity and Animation for the Web. 2nd Edition eBook -- spis treści

HTML5 Canvas
Dedication
A Note Regarding Supplemental Files
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
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
  - <div>
  - <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
    - So what kind of mechanism are they suggesting?
    - So what does this mean for developers?
- Whats Next?
2. Drawing on the Canvas
- The Basic File Setup for This Chapter
- The Basic Rectangle Shape
- The Canvas State
  - Whats 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
    - lineCap attributes
      - context.lineCap
    - lineJoin attributes
      - context.lineJoin
    - lineWidth
    - strokeStyle
  - Examples of More Advanced Line Drawing
- Advanced Path Methods
  - Arcs
    - context.arc()
    - context.arcTo()
  - Bezier Curves
  - The Canvas Clipping Region
- Compositing on the Canvas
- Simple Canvas Transformations
  - Rotation and Translation Transformations
    - Lesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called
    - Lesson 2: We must translate the point of origin to the center of our shape to rotate it around its own center
  - Scale Transformations
  - Combining Scale and Rotation Transformations
- Filling Objects with Colors and Gradients
  - Setting Basic Fill Colors
  - Filling Shapes with Gradients
    - Linear gradients
      - Linear horizontal gradients
      - Applying a horizontal gradient to a stroke
      - Applying a horizontal gradient to a complex shape
      - Vertical gradients
      - Diagonal gradients
      - Radial 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
- Whats Next?
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
    - Centering text using width
    - What about the height of the text?
  - fillText and strokeText
- Setting the Text Font
  - Font Size, Face, Weight, and Style Basics
  - Handling Font Size and Face in Text Arranger
    - Available font styles
    - Available font weights
    - Generic font faces
    - Font size and HTML5 range control
    - Creating the necessary variables in the canvasApp() function
    - Setting event handlers in canvasApp()
    - Defining event handler functions in canvasApp()
    - Setting the font in the drawScreen() function
  - Font Color
  - Font Baseline and Alignment
    - Vertical alignment
    - Horizontal alignment
    - Handling text 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
- Whats Next?
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
    - Step 1: Save the current context to the stack
    - Step 2: Reset the transformation matrix to identity
    - Step 3: Code the transform algorithm
    - Step 4: Draw the image
  - 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
    - Map height and width
    - Storing the map data
    - 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
    - ImageData attributes
    - Getting image data
    - Putting image data
  - Application Tile Stamper
    - How ImageData.data is organized
    - A visual look at our basic application
    - Adding mouse events to the canvas
    - The highlightTile() function
- 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
    - The pixelX loop
    - The nested pixelY loop
    - The collision check
    - All of the code for this example
- Whats Next?
5. Math, Physics, and Animation
- Moving in a Straight Line
  - Moving Between Two Points: The Distance of a Line
    - Drawing the ball
    - Tracing movement: A path of points
  - 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
    - Ball interactions in physics
    - Making sure the balls dont start on top of each other
    - Circle collision detection
    - Separating the code in drawScreen()
    - Updating positions of objects
    - Better interaction with the walls
    - Collisions with balls
    - Ball collisions in depth
  - 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
- Whats Next?
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
    - Video must still be embedded in HTML
    - Video is displayed like an image
    - Set an interval to update the display
  - HTML5 Video Properties
- Video on the Canvas Examples
  - Using the currentTime Property to Create Video Events
  - Canvas Video Transformations: Rotation
  - Canvas Video Puzzle
    - Setting up the game
    - Randomizing the puzzle pieces
    - Drawing the screen
    - Detecting mouse interactions and the canvas
    - Creating hit test point-style collision detection
    - Swapping two elements in a two-dimensional array
    - Testing the game
  - Creating Video Controls on the Canvas
    - Creating video buttons
    - Preloading the buttons
    - Placing the buttons
    - Listening for the button presses
- 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
- Whats Next?
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
    - Volume slider variables
    - Volume slider functionality
- Case Study in Audio: Space Raiders Game
  - Why Sounds in Apps Are Different: Event Sounds
  - Iterations
  - Space Raiders Game Structure
    - State machine
    - Initializing the game: no global variables
    - Preloading all assets without global variables
    - Resetting the game
    - Mouse control
    - Bounding box collision detection
    - Playing the game
  - 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
    - Other stuff you could do to improve the game
    - The final code for Space Raiders
- Web Audio API
  - What Is the Web Audio API?
  - Space Raiders with the Web Audio API Applied
- Whats Next?
8. Canvas Games: Part I
- Why Games in HTML5?
  - Canvas Compared to Flash
  - What Does Canvas Offer?
- Our Basic Game HTML5 File
- Our Games Design
- Game Graphics: Drawing with Paths
  - Needed Assets
  - Using Paths to Draw the Games Main Character
    - The static player ship (frame 1)
    - The ship with thrust engaged (frame 2)
- 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
    - The difference between facing and moving
    - Thrusting in the rotated direction
    - Redrawing the player ship to start at angle 0
  - Controlling the Player Ship with the Keyboard
    - The array to hold our key presses
    - The key events
    - Evaluating key presses
  - 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
    - Game application states
    - Game application state functions
    - Game application functions
  - Geo Blaster Global Game Variables
- The Player Object
- Geo Blaster Game Algorithms
  - Arrays of Logical Display Objects
    - Rocks
    - Saucers
    - Missiles
    - Explosions and particles
  - Level Knobs
  - Level and Game End
    - Level end
    - 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
    - Game variables for tank movement and node changes
    - Logic for updating the tank node and position
    - Drawing the tank on the screen
  - Tanks That Pass Through Walls?
- Whats Next?
9. Canvas Games: Part II
- Geo Blaster Extended
  - Geo Blaster Tile Sheet
    - Refresher: Calculating the tile source location
    - Other new player attributes
    - The new boundingBoxCollide() algorithm
  - Rendering the Other Game Objects
    - Rendering the saucers
    - Rendering the rocks
    - Rendering the missiles
    - Rendering the particles
  - Adding Sound
    - The sounds for our game
    - Adding sound instances and management variables to the game
    - Loading in sounds and tile sheet assets
    - Playing sounds
  - Pooling Object Instances
    - Object pooling in Geo Blaster Extended
    - Adding pooling variables to our game
  - Adding a Step Timer
- Creating a Dynamic Tile Sheet at Runtime
- A Simple Tile-Based Game
  - Micro Tank Maze Description
    - Game progression
    - Game strategy
  - The Tile Sheet for Our Game
  - The Playfield
  - The Player
  - The Enemy
  - The Goal
  - The Explosions
  - Turn-Based Game Flow and the State Machine
    - GAME_STATE_INIT
    - GAME_STATE_WAIT_FOR_LOAD
    - GAME_STATE_TITLE
    - GAME_STATE_NEW_GAME
    - GAME_STATE_WAIT_FOR_PLAYER_MOVE
    - GAME_STATE_ANIMATE_PLAYER
    - GAME_STATE_EVALUATE_PLAYER_MOVE
    - GAME_STATE_ENEMY_MOVE
    - GAME_STATE_ANIMATE_ENEMY
    - GAME_STATE_EVALUATE_ENEMY_MOVE
    - GAME_STATE_EVALUATE_OUTCOME
    - GAME_STATE_ANIMATE_EXPLODE
    - GAME_STATE_CHECK_FOR_GAME_OVER
    - GAME_STATE_PLAYER_WIN
    - GAME_STATE_PLAYER_LOSE
  - 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
    - The camera top-left position
    - The camera scrolled position
    - The camera far-right scrolled position
    - The camera far down scrolled position
  - Coarse Scrolling Full Code Example
  - Fine Scrolling Full Code Example
- Whats Next?
10. Going Mobile!
- The First Application
  - The Code
  - Examining the Code for BSBingo.html
    - The TextButton.js file
    - The initLists() function
    - The initButtons() function
    - The initSounds() function
    - The chooseButtonsForCard() function
    - The drawScreen() function
    - The onMouseClick() function
    - The onMouseMove() function
  - The Application Code
  - Scaling the Game for the Browser
    - Starting to create a full screen mobile version of BS Bingo
    - Changing the Canvas style properties
    - Updating the mouse listening code
    - Adding meta-tags for iOS devices
  - Testing the Game on an Actual Device
- Retro Blaster Touch
- Mobilizing Retro Blaster Touch
  - Jumping to Full Screen
    - Canvas element
    - Meta-tags
    - Style sheets
  - Touch Move Events
    - New global variables
    - New listener functions
    - Auto-fire
    - Player movement
    - Checking out the game
  - Retro Blaster Touch Complete Game Code
- Beyond the Canvas
- Whats Next?
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?
    - JavaScript libraries
    - Shaders
    - Testing for WebGL support with Modernizr
    - Initialization in canvasApp()
    - Animating the cube
  - Further Explorations with WebGL
  - WebGL JavaScript Libraries
    - Google O3D
    - C3DL
    - SpiderGL
    - SceneJS
    - CopperLicht
    - GLGE
    - Three.js
- Multiplayer Applications with ElectroServer 5
  - Installing ElectroServer
    - Starting the server
    - The ElectroServer admin tool
    - The JavaScript API
  - The Basic Architecture of a Socket-Server Application
  - The Basic Architecture of an ElectroServer Application
    - Client
    - Zones, rooms, and games
    - Extensions
  - Creating a Chat Application with ElectroServer
    - Establishing a connection to ElectroServer
    - Creating the chat functionality
  - 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
    - EventDispatcher.js
    - Ornament.js
    - DisplayList.js
    - GameUtilities.js
    - DragAndDrop.js
    - DragAndDrop.html
- Windows 8 Apps and the HTML5 Canvas
- Whats Next in HTML5.1 and Canvas Level 2?
  - HTML5.1 Canvas Context
    - supportsContext()
    - toDataURLHD(), toBlob(), toBlobHD()
  - Canvas Level-2
- Conclusion
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
Colophon
Copyright