HTML5 Canvas Learning Notes (i)

One, theCanvas element API

　　 The canvas element does not provide many APIs, in fact he only provides two properties and three methods:

1. Canvas element Properties

Width property: With the height property:

The width of the canvas element's surface, which, by default, sets the canvas element size to match the size of the drawing surface, but if the element size is covered in CSS, the browser scales the drawing surface to fit the element size. Its value is a non-negative integer, and the default value is 300.

2. Canvas Element method

GetContext () Method:

Returns the drawing environment objects associated with the canvas element, each of which has an environment object, and each environment object is associated with a canvas element.

Todataurl (type,quality) method:

Returns a data URL, which you can set as the SRC attribute value of an img and an element. The first parameter specifies the type of the image, such as Image/jpeg or image/png, and image/png is used by default if the first argument is not specified. The second argument must be a double value between 0~1.0, which indicates the quality of the JPEG image's display.

Toblob (Callback,type,args ... ）

Creates a blob to represent the image of this canvas element. The first parameter is a callback function, and the browser invokes the callback function with a reference to the BLOB as a parameter. The second parameter specifies the image type in the form "Image/png". If not specified, the default using "Image/png" is the value between 0.0~1.0, which represents the quality of the JPEG image. Some other parameters for precise control of image properties are likely to be added in the future

Ii. attributes contained in the CANVASRENDINGCONTEXT2D object

Canvas points to the canvas object to which the drawing environment belongs. The most common use of this property is to obtain the width and height of the canvas by invoking Context.canvas.width and Context.canvas.height, respectively.

FillStyle specifies the color, gradient color, or pattern used by the drawing environment in subsequent drawing fill operations

The font specifies the font used when invoking the Filltext () or Stroketext () method of the drawing environment object.

Globalalpha Global Transparency Settings

Globalcompsiteoperation This value feels like the way the browser draws an object when it is drawn on top of other objects.

LineCap This value tells the browser how to draw the endpoint of a segment, and can specify values of butt, round, and square. The default value is butt.

LineWidth This value determines the screen pixel width of the segment being drawn within the canvas. It must be a non-negative, non-infinite double value.

LineJoin tells the browser how to draw the focus at the intersection of two segments, the desirable value is: bevel, round miter The default value is miter.

Miterlimit tells the browser how to draw the segment focus in miter form

Shadowblur This value determines how the browser extends the shadow effect. The higher the value, the farther the shadow effect extends. The default value is 0.

Shadowcolor This value tells the browser what color to use to draw the shadow. A semi-transparent color is usually used as the value of this property so that the background can be displayed

SHADOWOFFSETX specifies the horizontal direction offset of the shadow effect, in pixels

SHADOWOFFSETY Specifies the vertical offset of the shadow effect, in pixels

Strokestyle specifies the drawing style that is used to stroke the path. The value can be set to a color, gradient, or pattern.

TextAlign determines the horizontal alignment of the drawn text when drawn with the Filltext () or Stroketext () method.

Textbaseline determines the vertical alignment of the text that is drawn when the Filltext () or Stroketext () method is drawn.