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

The canvas element can be said to be the most powerful one in the HTML5 element, and its true ability is expressed through the context object of the canvas (drawing contexts).

The Filltext () method uses the FillStyle property to populate the characters in the text, and the Stroketext () method uses the Strokestyle property to depict the outline of the character, and the FillStyle property and the Strokestyle property can be the color of the CSS format, Gradient or picture

Both the Filltext () and Stroketext () methods require 3 parameters: The text content to be drawn, and the horizontal and vertical coordinates of the text displayed in the canvas

Note: When setting the width and height of the canvas, the PX suffix cannot be used, and the value can only be a non-negative integer

In fact, the canvas element has two sets of dimensions, one is the size of the element itself, and the other is the size of the element drawing surface (drawing surface);

When you directly set the width and height property of an element, you are actually modifying the size of the element itself and the surface of the element drawing, and if you set the size of the canvas element by using CSS, it will only change the size of the element itself, without affecting the drawing surface (by default, The canvas element and its drawing surface are all 300 pixels wide and 150 pixels high)

When the size of a canvas element does not match the size of its drawing surface, the browser scales the drawing surface to match the size of the element

The canvas element's API, which provides two properties and three methods

The cancas itself is seldom used, and occasionally it gets the width, height, or data address of a canvas, and other 2d drawing environment properties are related to drawing operations

will be described in detail in a later section

JavaScript is a dynamic language, so you can add new methods to the drawing environment or expand existing methods

In canvas, the 3d drawing environment that corresponds to the 2d drawing environment is called WEBGL

Save and restore the canvas state:

The Canvas API provides two named Save () and restore () methods for saving and restoring all properties of the current canvas drawing environment

The Save () method presses the current drawing environment onto the top of the stack, and the Restore () method pops a set of state information from the top of the stack to restore the state of the current drawing environment. This means that both methods can be called in a nested style

var Canvas=document.getelementbyid (' canvas '), reference to the//canvas element

Context=canvas.getcontext (' 2d '); References to their drawing environment

The creator of the canvas element is referred to as the user agent (in Chinese, it is a proxy, or UA).

Explorecanvas and Google Chrome frame projects support the use of canvas in IE6, 7, 8

Performance Analyzer (Profiler)

Time Axis tool (Timeline)

Jsperf.com (JS performance test Site)