HTML5 Canvas Core technology: Graphics, animation and game development PDF scan version?

HTML5 Canvas Core technology: Graphics, animation and game development content Introduction:

"HTML5 Canvas Core technology: Graphics, animation and game development", the best-selling author David Geary (Kirill), a practical example of the program directly into the API, a comprehensive explanation of its function, in order to enable readers to achieve a rich and consistent interface of the Web application program, And the development of a good program deployed 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

Directory:

Objective

The 1th Chapter Basic knowledge

1.1 Canvas Elements

1.1.1 The size of the canvas element and the size of the drawing surface

1.1.2 API for Canvas elements

1.2 Canvas's drawing environment

1.2.12D Drawing Environment

1.2.2 Save and restore of canvas state

1.3 The canonical format of the book's program list

1.4 Start learning HTML5

1.4.1 Specification

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 Drawing surface preservation and restoration

1.8 Using HTML elements in a canvas

1.9 Printing the contents of a canvas

1.10 Off-screen canvas

1.11 Introduction to Basic mathematics knowledge

1.11.1 Solving Algebraic equations

1.11.23-Corner function

1.11.3 Vector Operations

1.11.4 derivation of equations based on units of measure

1.12 Summary

2nd Chapter Drawing

2.1 Coordinate system

Drawing model of 2.2 canvas

2.3 Drawing of rectangles

2.4 Color and transparency

2.5 Gradient and pattern

2.5.1 Fade Color

2.5.2 pattern

2.6 Shadows

2.7 paths, strokes, and fills

2.7.1 paths and sub-paths

2.7.2 Paper-Cut effect

2.8 Segment

2.8.1 Segments and pixel boundaries

Drawing of the 2.8.2 grid

Drawing of 2.8.3 axes

2.8.4 Rubber-Band Line drawing

Drawing of 2.8.5 dashed lines

2.8.6 to draw dashed lines by extending CANVASRENDERINGCONTEXT2D

2.8.7 line End and connection point drawing

2.9 Drawing of arcs and circles

Use of the 2.9.1 arc () method

2.9.2 helps users draw circles with rubber band Guides

The use of the 2.9.3 ArcTo () method

Drawing of 2.9.4 scale instrument panel

2.10 Bezier Curve

2.10.12 Cubic Bezier curve

2.10.23 Cubic Bezier Curve

2.11 Drawing of multi-side shapes

2.12 Advanced Path Operations

2.12.1 dragging a Polygon object

2.12.2 editing Bezier Curves

2.12.3 automatically scrolls the page so that the element corresponding to the path is displayed in the window

2.13 Coordinate transformations

Translation, scaling, and rotation of the 2.13.1 coordinate system

2.13.2 Custom Coordinate transformations

2.14 Image Synthesis

2.15 Clipping Area

2.15.1 erasing an image by clipping region

2.15.2 using clipping regions to create telescopic animations

2.16 Summary

3rd Chapter Text

3.1 Stroke and fill of text

3.2 Setting font properties

3.3 Positioning of text

3.3.1 Horizontal and vertical positioning

3.3.2 To center text

3.3.3 Measurement of text

3.3.4 to draw the text label next to the axis

3.3.5 plotting text labels around a numeric dashboard

3.3.6 drawing text around an arc

3.4 Implementing a text-editing control

3.4.1 cursor indicating the text input position

3.4.2 editing text in a canvas

3.4.3 Editing of text segments

3.5 Summary

The 4th Chapter image and video

4.1 Drawing of images

4.1.1 Drawing images in canvas

The use of the 4.1.2 DrawImage () method

4.2 Scaling of images

4.3 Draw a canvas into another canvas

4.4 Off-screen canvas

4.5 Manipulating the pixels of an image

4.5.1 Getting image data

4.5.2 Modifying image data

4.6 Combining clipping regions to draw images

4.7 Animating with Images

4.8 Security issues with image rendering

4.9 Performance

4.9.1 Comparison of drawing efficiency of DrawImage (HtmlImage), DrawImage (Htmlcanvas) and Putimagedata ()

4.9.2 the contrast between drawing another canvas and drawing a normal image in the canvas, scaling the image and keeping it as it is when drawing

4.9.3 traversing image data

4.10 Magnifier

4.10.1 using off-screen canvas

4.10.2 Accept user-dragged images from the file system

4.11 Video Processing

4.11.1 Video Format

4.11.2 playing video in canvas

4.11.3 Video Processing

4.12 Summary

5th Chapter Animation

5.1 Animation loop

5.1.1 using the Requestanimationframe () method allows the browser to determine the frame rate by itself

5.1.2 the implementation of the Requestanimationframe () feature in Internet Explorer browser

5.1.3 Animation loop logic that can be ported to each browser platform

5.2 Calculation of frame rate

5.3 Perform a variety of tasks at different frame rates

5.4 Resuming animated background

5.4.1 using clipping regions to handle animated backgrounds

5.4.2 using tile copy technology to handle animated backgrounds

5.5 animating with double buffering technology

5.6 Time-based motion

5.7 Scrolling background

5.8 Parallax Animation

5.9 User gestures

5.10 Timed Animations

5.10.1 Stopwatch

5.10.2 Animation Timer

5.11 Best Guiding principles for animation production

5.12 Summary

6th Chapter Wizard

6.1 Wizard Overview

6.2 Sprite Drawing Device

6.2.1 Stroke and fill paint

6.2.2 Image Drawing Device

6.2.3 Wizard Table Drawing device

6.3 Behavior of the Sprite object

6.3.1 Multiple behaviors together

6.3.2-timed triggering behavior

6.4 Elf animation maker

6.5 Sprite-based animation loops

6.6 Summary

......

Chapter 7th Physical Effects

The 8th Chapter Collision detection

9th Chapter Game Development

10th. Custom Controls

11th Chapter Mobile Platform Development

HTML5 Canvas Core technology: Graphics, animation and game development PDF scan version?