HTML5 Canvas Core Technology: Graphics, Animation and Game Development Introduction:
In "HTML5 Canvas Core Technology: Graphics, Animation and Game Development", the best-selling author David Geary directly cuts into this API with practical example programs, and comprehensively explains its functions, in order to allow readers to achieve rich content and A web application with a consistent interface, and deploy the developed program on a variety of devices and operating systems.
Tutorial address: HTML5 Canvas core technology: graphics, animation and game development PDF scan version
HTML5 Canvas Core Technology: Graphics, Animation and Game Development
content:
foreword
Chapter 1 Basics
1.1 canvas element
1.1.1 The size of the canvas element and the size of the drawing surface
1.1.2 API of canvas element
1.2 The drawing environment of canvas
1.2.12d drawing environment
1.2.2 Saving and Restoring Canvas State
1.3 Canonical Format for Program Listings in This Book
1.4 Start learning html5
1.4.1 Specifications
1.4.2 Browser
1.4.3 Console and Debugger
1.4.4 Performance
1.5 Basic drawing operations
1.6 Event Handling
1.6.1 Mouse Events
1.6.2 Keyboard Events
1.6.3 Touch events
1.7 Saving and Restoring Drawing Surfaces
1.8 Using html elements in canvas
1.9 Printing the contents of the canvas
1.10 Off-screen canvas
1.11 Introduction to Basic Mathematical Knowledge
1.11.1 Solving algebraic equations
1.11.2 Trigonometric functions
1.11.3 Vector Operations
1.11.4 Deriving equations in terms of units of measure
1.12 Summary
Chapter 2 Drawing
2.1 Coordinate system
2.2 Drawing model of canvas
2.3 Drawing of rectangle
2.4 Color and Transparency
2.5 Gradients and patterns
2.5.1 Gradient color
2.5.2 Pattern
2.6 Shadows
2.7 Paths, strokes and fills
2.7.1 Paths and subpaths
2.7.2 Paper-cut effect
2.8 Line segment
2.8.1 Line Segments and Pixel Boundaries
2.8.2 Grid drawing
2.8.3 Drawing of coordinate axes
2.8.4 Rubber band-style line drawing
2.8.5 Drawing of dashed lines
2.8.6 Drawing dashed lines by extending canvasrenderingcontext2d
2.8.7 Drawing of line segment endpoints and connection points
2.9 Drawing of arcs and circles
2.9.1 Usage of arc() method
2.9.2 Use rubber band guides to help users draw circles
2.9.3 Usage of arcto() method
2.9.4 Drawing of Scale Dashboard
2.10 Bezier Curves
2.10.1 Quadratic Bezier Curve
2.10.2 Cubic Bezier Curve
2.11 Drawing of polygons
2.12 Advanced Path Operations
2.12.1 Drag a polygon object
2.12.2 Editing Bezier Curves
2.12.3 Automatically scroll the web page so that the element corresponding to a certain path is displayed in the viewport
2.13 Coordinate transformation
2.13.1 Translation, scaling and rotation of the coordinate system
2.13.2 Custom Coordinate Transformation
2.14 Image synthesis
2.15 Clipping Regions
2.15.1 Erase the image by clipping the area
2.15.2 Using clipping regions to make stretch animation
2.16 Summary
Chapter 3 Text
3.1 Stroke and fill of text
3.2 Set font properties
3.3 Positioning of text
3.3.1 Horizontal and vertical positioning
3.3.2 Center text
3.3.3 Measurement of text
3.3.4 Drawing text labels next to axes
3.3.5 Drawing text labels around a numeric dashboard
3.3.6 Drawing text around an arc
3.4 Implementing text editing controls
3.4.1 Cursor indicating text entry position
3.4.2 Editing text in canvas
3.4.3 Editing of text segments
3.5 Summary
Chapter 4 Images and Videos
4.1 Drawing of images
4.1.1 Drawing images in canvas
4.1.2 Usage of drawimage() method
4.2 Image scaling
4.3 Drawing one canvas into another canvas
4.4 Off-screen canvas
4.5 Manipulating the pixels of an image
4.5.1 Get Image Data
4.5.2 Modify image data
4.6 Drawing images with clipping regions
4.7 Animate with images
4.8 Security Issues of Image Drawing
4.9 Performance
4.9.1 Comparing the drawing efficiency of drawimage(htmlimage), drawimage(htmlcanvas) and putimagedata()
4.9.2 Drawing another canvas in a canvas versus drawing a normal image; scaling an image while drawing versus keeping it as it is
4.9.3 Traversing image data
4.10 Magnifying glass
4.10.1 Using off-screen canvas
4.10.2 Accept user drag-and-drop images from the file system
4.11 Video Processing
4.11.1 Video Format
4.11.2 Play video in canvas
4.11.3 Video Processing
4.12 Summary
Chapter 5 Animation
5.1 Animation loop
5.1.1 Let the browser decide the frame rate by itself through the requestanimationframe() method
5.1.2 Implementation of requestanimationframe() function by internet explorer browser
5.1.3 Animation loop logic portable to various browser platforms
5.2 Calculation of frame rate
5.3 Perform various tasks at different frame rates
5.4 Restore the animated background
5.4.1 Using clipping regions to handle animated backgrounds
5.4.2 Using tile copying technology to process animated backgrounds
5.5 Drawing animations with double buffering
5.6 Time-Based Movement
5.7 Scrolling of the background
5.8 Parallax animation
5.9 User Gestures
5.10 Timed animation
5.10.1 Stopwatch
5.10.2 Animation Timer
5.11 Best Guidelines for Animation Production
5.12 Summary
Chapter 6 Elves
6.1 Overview of sprites
6.2 Sprite Painter
6.2.1 Stroke and Fill Painter
6.2.2 Image Renderer
6.2.3 Sprite Sheet Painter
6.3 Behavior of sprite objects
6.3.1 Combining multiple behaviors
6.3.2 Time-limited behavior
6.4 Sprite Animator
6.5 Sprite-based animation loops
6.6 Summary
……
Chapter 7 Physical Effects
Chapter 8 Collision Detection
Chapter 9 Game Development
Chapter 10 Custom Controls
Chapter 11 Mobile Platform Development