HTML5 Canvas Cookbook电子书

HTML5 Canvas Cookbook

Table of Contents

HTML5 Canvas Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

What is HTML5 Canvas

Conventions

Reader feedback

Customer support

Downloading the example code for this book

Errata

Piracy

Questions

1. Getting Started withPaths and Text

Introduction

Drawing a line

How to do it...

How it works...

There's more...

See also...

Drawing an arc

How to do it...

How it works...

There's more...

See also...

Drawing a Quadratic curve

How to do it...

How it works...

See also...

Drawing a Bezier curve

How to do it...

How it works...

See also...

Drawing a zigzag

How to do it...

How it works...

Line join styles

Drawing a spiral

How to do it...

How it works...

Working with text

How to do it...

How it works...

There's more...

See also...

Drawing 3D text with shadows

How to do it...

How it works...

Unlocking the power of fractals: Drawing a haunted tree

How to do it...

How it works...

There's more...

2. Shape Drawing and Composites

Introduction

Drawing a rectangle

How to do it...

How it works...

There's more...

The fillRect() method

The strokeRect() method

See also...

Drawing a circle

How to do it...

How it works...

See also...

Working with custom shapes and fill styles

How to do it...

How it works...

See also...

Fun with Bezier curves: drawing a cloud

How to do it...

How it works...

Drawing transparent shapes

How to do it...

How it works...

Working with the context state stack to save and restore styles

Getting ready...

How to do it...

How it works...

There's more...

See also...

Working with composite operations

Getting ready...

How to do it...

How it works...

Creating patterns with loops: drawing a gear

How to do it...

How it works...

See also...

Randomizing shape properties: drawing a field of flowers

How to do it...

How it works...

Creating custom shape functions: playing card suits

How to do it...

How it works...

Putting it all together: drawing a jet

How to do it...

How it works...

3. Working with Images and Videos

Introduction

Drawing an image

How to do it...

How it works...

There's more...

Cropping an image

How to do it...

How it works...

Copying and pasting sections of the canvas

How to do it...

How it works...

Working with video

Getting ready...

How to do it...

How it works...

Getting image data

Getting ready...

How to do it...

How it works...

Introduction to pixel manipulation: inverting image colors

How to do it...

How it works...

Inverting video colors

How to do it...

How it works...

Converting image colors to grayscale

How to do it...

How it works...

Converting a canvas drawing into a data URL

How to do it...

How it works...

Saving a canvas drawing as an image

How to do it...

How it works...

Loading the canvas with a data URL

How to do it...

How it works...

Creating a pixelated image focus

How to do it...

How it works...

4. Mastering Transformations

Introduction

Translating the canvas context

How to do it...

How it works...

Rotating the canvas context

How to do it...

How it works...

See also...

Scaling the canvas context

How to do it...

How it works...

See also...

Creating a mirror transform

How to do it...

How it works...

Creating a custom transform

How to do it...

How it works...

There's more...

Shearing the canvas context

How to do it...

How it works...

Handling multiple transforms with the state stack

How to do it...

How it works...

Transforming a circle into an oval

How to do it...

How it works...

See also...

Rotating an image

How to do it...

How it works...

There's more...

See also...

Drawing a simple logo and randomizing its position, rotation, and scale

How to do it...

How it works...

5. Bringing the Canvas to Life with Animation

Introduction

Creating an Animation class

Getting ready...

How to do it...

How it works...

Creating a linear motion

How to do it...

How it works...

See also...

Creating acceleration

How to do it...

How it works...

See also...

Creating oscillation

How to do it...

How it works...

See also...

Oscillating a bubble

How to do it...

How it works...

See also...

Swinging a pendulum

How to do it...

How it works...

See also...

Animating mechanical gears

How to do it...

How it works...

See also...

Animating a clock

How to do it...

How it works...

See also...

Simulating particle physics

How to do it...

How it works...

There's more...

See also...

Creating microscopic life forms

How to do it...

How it works...

See also...

Stressing the canvas and displaying the FPS

How to do it...

How it works...

There's more...

See also...

6. Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions

Introduction

Creating an Events class

How to do it...

How it works...

Working with canvas mouse coordinates

How to do it...

How it works...

Attaching mouse event listeners to regions

How to do it...

How it works...

See also...

Attaching touch event listeners to regions on a mobile device

How to do it...

How it works...

See also...

Attaching event listeners to images

How to do it...

How it works...

See also...

Dragging-and-dropping shapes

How to do it...

How it works...

See also...

Dragging-and-dropping images

How to do it...

How it works...

See also...

Creating an image magnifier

How to do it...

How it works...

See also...

Creating a drawing application

How to do it...

How it works...

There's more...

See also...

7. Creating Graphs and Charts

Introduction

Creating a pie chart

How to do it...

See also...

How it works...

Creating a bar chart

How to do it...

How it works...

See also...

Graphing equations

How to do it...

How it works...

See also...

Plotting data points with a line chart

How to do it...

How it works...

See also...

8. Saving the World with Game Development

Introduction

Creating sprite sheets for the heroes and enemies

Getting ready...

How to do it

Creating level images and boundary maps

How to do it...

How it works...

There's more...

Boundary map alternative

Level image alternatives

Creating an Actor class for the hero and enemies

How to do it...

How it works...

See also...

Creating a Level class

How to do it...

How it works...

See also...

Creating a Health Bar class

How to do it...

How it works...

Creating a Controller class

How to do it...

How it works...

Creating a Model class

How to do it...

How it works...

There's more...

See also...

Creating a View class

How to do it...

How it works...

See also...

Setting up the HTML document and starting the game

How to do it...

How it works...

There's more...

See also...

9. Introducing WebGL

Introduction

Creating a WebGL wrapper to simplify the WebGL API

How to do it...

How it works...

There's more...

See also...

Creating a triangular plane

How to do it...

How it works...

Rotating a triangular plane in 3D space

How to do it...

How it works...

See also...

Creating a rotating cube

How to do it...

How it works...

See also...

Adding textures and lighting

How to do it...

How it works...

See also...

Creating a 3D world that you can explore

How to do it...

How it works...

There's more...

See also...

A. Detecting Canvas Support

Canvas fallback content

Detecting available WebGL contexts

B. Canvas Security

C. Additional Topics

Canvas vs. CSS3 transitions and animations

Canvas performance on mobile devices

Index