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

Positioning of text

Horizontal and vertical positioning: When you draw text using Stroketext () and Filltext (), you specify the x and y coordinates of the painted text, and TextAlign and Textbaseline two properties

Textalign:start (default) center end left right, when the Dir property of the canvas element is ltr, the left effect is the same as start, right is the same as end, and if the Dir property is RTL, the opposite

Textbaseline:top Bottom Middle alphabetic (default, Latin based) ideographic (Japanese or Chinese) hanging (Hindi)

Measure of text: The Measuretext () method returns a Textmetrics object containing a width property

Context.measuretext (...). Width

The 4th Chapter image and video

The canvas drawing Environment object provides 4 ways to draw and manipulate an image

DrawImage () Getimagedata () Putimagedata () Createimagedata ()

Image drawing (can only be loaded after the image has been read)

When drawing, the image is called "source image", which is recorded as S, where it is plotted as D

DrawImage (Image,dx,dy)

DrawImage (IMAGE,DX,DY,DW,DH) (for zooming)

DrawImage (IMAGE,SX,SY,SW,SH,DX,DY,DW,DH) (select partial image and zoom)

The first parameter is a htmlimageelement type of image object or htmlcanvaselement type of a canvas object or a htmlvideoelement type of video object

When the magnification is greater than 1.0, the X and Y values are negative, allowing the image to be drawn outside of the canvas

Off-screen canvas, often used to hold temporary image information, usually has 4 steps:

Create a canvas element for use as a off-screen

Set the width and height of the off-screen canvas

Draw in off-screen canvas

Copy all or part of the off-screen canvas into the canvas you are displaying

Offscreencanvas=document.createelement (' canvas ') creates a canvas element that does not belong to any DOM element (so called off-screen canvas) and needs to reset its width and height

Off-screen canvas will occupy a certain amount of memory, but can significantly improve drawing efficiency