HTML5 step by step-extended graphic markup (5)

Draw text:
Similar to drawing a graph, first fill and then stroke
For example:
Context. fillText (text, x, y, maxwidth );
Context. strokeText (text, x, y, maxwidth );

Measure the text width:
TextWidth = context. measureText (text). width;

TextBaseline specifies the vertical alignment mode:
Context. textBaseline = [top | middle | bottom | hanging]

DrawImage:
Context. drawImage (image, dx, dy );
Context. drawImage (image, dx, dy, dw, dh );
Context. drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh );
Parameter Parsing:
Image: The image to be drawn.
X, y: the position in the upper left corner of the image to be drawn.
Width, height: the size of the image to be drawn. Specify these parameters so that the image can be scaled.
SourceX and sourceY: upper left corner of the area to be drawn. These integer parameters are measured in image pixels.
SourceWidth and sourceHeight: the size of the area to be drawn by the image, which is expressed in pixels.
DestX, destY: coordinates of the canvas in the upper left corner of the image area to be drawn.
DestWidth and destHeight: size of the canvas to be drawn in the image area.

Select a region and paste it to the target region:
Image. onload = function (){
Context. drawImage (image, 0, 0 );
Context. drawImage (image, 620,300,375,390, 10,200,250 );
}

How to draw an overlapping Image
Context. globalCompositeOperation = 'mode (source-over, source-in )'

Draw pixels:
GetImageData (): Get image pixels, putImageData (): Write back pixels.

Author: shiyuan17