HTML5 Canvas Core technology-graphics, animation and game development. Pdf7

Performance

Running Putimagedata () is slower than DrawImage () and takes precedence over DrawImage () under the same conditions

Manipulating the image data requires traversing a large amount of data, which should be noted:

1) Avoid direct access to object properties in the loop body and should be stored in local variables

2) The full pixel should be traversed with the loop counter, not the pixel component (every 4 groups)

3) Reverse traversal and shift techniques are not good.

4) Do not use getimagedata frequently ()

Video processing

var Video=document.getelementbyid (' video '); A <video>element

...

Context.drawimage (video,0,0); Take one of these frames

Video format

The above three formats are not supported by all browsers, need to specify multiple-format files, embed the source element in the video element

<video>

<source src= ' Video.ogg ' >

<source src= ' Video.mp4 ' >

</video>

Play a video in the canvas

Set the <video> element display to none to draw each frame of the video to the canvas

5th Chapter Animation

Animation loop: Continuous update and redraw is called "animation Loop", which is the core logic of all animations

Dead Loop:

function animate () {...}

while (true) {animate ();}

To animate, you have to give your browser a chance to breathe for a while.

Do not use the Window.setinterval () or Window.settimeout () method to animate, these two methods do not provide an accurate timing mechanism, the browser has a term "clamping the timeout Interval (enforces the lower limit of the time interval), and should not actively command the browser when to draw the next frame (the browser has its own animation mechanism), should be notified to you by the browser, summary:

Are common methods and are not intended for animation purposes

Accuracy up to milliseconds

No optimizations for animations

The best time to not consider drawing animations

HTML5 has a requestanimationframe () method that calls the Requestanimationframe () method when it wants to play the animation, and passes a reference to the animation play function to it, which is called when the browser decides to draw the first frame animation. Can be called again depending on the situation so that the animation continues

function (time) {

Requestanimationframe (animate);

}

Requestanimationframe (animate);

When calling the Requestanimationframe () method, you do not have to specify a frame rate, and the browser automatically chooses the appropriate frame rate

The Cancelrequestanimationframe () method is also provided to cancel the callback function, and the Requestanimationframe () method returns a Long object. The handle used as the identity of the callback function (equivalent to the handle returned by the SetInterval function), to be canceled, passed to Cancelrequestanimationframe ().

The Requestanimationframe () method is passed to a time value when the animation function is called, indicating the number of milliseconds elapsed from January 1, 1970 to the current

Portable and browser-based animation loop logic: If you find that the current browser supports the standard method, use it, otherwise use the browser's proprietary implementation, if both are not supported, only by using the settimeout () method to implement

Frame rate calculation, the number of frames that the animation plays per second (FPS) calculates the current time of each frame animation, gets the difference, 1000 milliseconds apart from the difference

Perform various tasks at different frame rates (the update rate for fractions does not have to be the same as the animation rate)

Three ways to resume the animated background and handle the background

1) Erase all content and redraw

2) redraw only the part of the area where the content has changed

3) Copy the part of the background image that changed the content from the off-screen buffer to the screen

If the background is simple, you can get the best performance by redrawing all the contents of each frame of animation

Manipulate animation backgrounds with clipping regions

All drawing operations are scoped to the defined range of a path, using clipping region technology to restore the background of the previous frame animation, sometimes improving the drawing speed

1) Call Context.save () to save the state of the canvas on the screen

2) Start a new path by calling Beginpath ()

3) Call arc (), Rect () on the context object to set the path

4) Call the Context.clip () method to set the current path to the clipping region of the screen canvas

5) Erase the image from the screen canvas

6) Draw the background image to the screen canvas

7) Restore the state parameters of the screen canvas

Using tile copy technology to handle animated backgrounds

Draw all backgrounds to the off-screen canvas and copy the background tiles to the screen

Generally it is faster to copy than clip area through tile, but the off-screen canvas consumes more memory

Animate with double buffering (this technique is automatically used by the browser, but performance is reduced by hand)

Clear canvas and then draw the next frame of animation, if the animation is a single buffer, meaning that its contents will be immediately drawn to the screen, erasing the background of the blink of an instant caused by

Prevent flicker you can use double buffering, draw everything to the off-screen canvas, and copy the pictures from the off-screen canvas to the screen canvas at once

Time-based motion

The underlying frame rate should not affect the frame rate of the animation, the animation frame rate should remain stable

Scrolling of the background

Parallax Animation: Lets individual animation layers scroll at different speeds, creating parallax effects

User gestures

Timed animations: Many animations need to be run within a certain time period

Animation is the best guiding principle of production

Use a "polyfill" approach like requestnextanimationframe () to maintain browser compatibility

Separate the update of business logic from the drawing of animations

Use time-based motion to coordinate the playback speed of an animation

Restore complex background images to the screen with clip region or tile copy technology

Use one or more off-screen buffers to raise the drawing speed of the background if necessary

Do not manually implement the traditional double buffering algorithm, the browser will automatically implement it

Do not specify shadow and fillet effects through CSS

Do not draw with shadow effect in canvas

Do not allocate memory when playing an animation

Monitor and improve animation drawing efficiency with performance tuning and timeline tools