HTML5 Canvas Cookbook. Over 80 recipes to revolutionize the Web experience with HTML5 Canvas - Helion
ebook
Autor: Eric RowellTytuł oryginału: HTML5 Canvas Cookbook. Over 80 recipes to revolutionize the Web experience with HTML5 Canvas
ISBN: 9781849691376
stron: 348, Format: ebook
Data wydania: 2011-11-25
Księgarnia: Helion
Cena książki: 119,00 zł
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 without Flash. Although the HTML5 Canvas is quickly becoming the standard for online graphics and interactivity, many developers fail to exercise all of the features that this powerful technology has to offer.The HTML5 Canvas Cookbook begins by covering the basics of the HTML5 Canvas API and then progresses by providing advanced techniques for handling features not directly supported by the API such as animation 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, animation, physics, color models, and matrix mathematics.
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.
Osoby które kupowały "HTML5 Canvas Cookbook. Over 80 recipes to revolutionize the Web experience with HTML5 Canvas", wybierały także:
- Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
- Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
- DevOps w praktyce. Kurs video. Jenkins, Ansible, Terraform i Docker 190,00 zł, (39,90 zł -79%)
- Przywództwo w świecie VUCA. Jak być skutecznym liderem w niepewnym środowisku 58,64 zł, (12,90 zł -78%)
- Scrum. O zwinnym zarządzaniu projektami. Wydanie II rozszerzone 58,64 zł, (12,90 zł -78%)
Spis treści
HTML5 Canvas Cookbook. Over 80 recipes to revolutionize the Web experience with HTML5 Canvas eBook -- spis treści
- 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
- Support files, eBooks, discount offers and more
- 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...
- Theres 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...
- How to do it...
- 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
- Canvas fallback content
- B. Canvas Security
- C. Additional Topics
- Canvas vs. CSS3 transitions and animations
- Canvas performance on mobile devices
- Index