Canvas — Summary 2

Time:2021-4-15

Canvas drawing

  • Rectangle drawing

Rect (x, y, W, H) has no independent path

Stroke Rect (x, y, W, H) has independent path, which does not affect other drawing

FillRect (x, y, W, H) has independent path, which does not affect other drawing

Clearrect (x, y, W, H) the rectangular area to be erased

 

  • Arc drawing

The concept of radian

The radian of a circle is equal to 2 π

The angle radian is converted to an angle equal to π / 180

Draw arc: arc (x, y, R, startangle, endangle, anticlockwise);

Parameters:

X ﹣ abscissa of circle center

Y ﹣ center ordinate

R = radius

Startangle

Endangle

Whether to draw counterclockwise (default false means clockwise, true means counter clockwise) Note: when using counter clockwise, whether to change the starting and ending angles of the requirements

 

ctx.font=Microsoft YaHei set font

strokeText(text,x,y,maxWidth); / stroke textfillText(text,x,y,maxWidth); / fill in text

Parameters:

Text: text to draw

x. Y: coordinates of text drawing (lower left corner of text)

     maxWidth:   Set the maximum width of the text, optional parameters

ctx.textAngleText horizontal alignment, relative to drawing coordinates (parameters: left, center, right, start (default), end)

ctx.directionAttributes CSS (RTL, LTR) start and end are related

If it is LTR, start and left are consistent (LTR — from left to right)

If it is RTL, start and right are consistent (RTL — from right to left)

ctx.textBaselineSet baseline (vertical alignment)

The baseline of the top text is directly above the text and at a distance

Middle the baseline of the text is in the middle of the text

Bottom the baseline of the text is directly below the text and at a distance

Hanging the baseline of the text is directly above and glued to the text

The baseline is below the text and passes through the text

Ideographic and bottom are similar, but different//

measureText() Get text width obj.width

 

Animation

drawImage();

Three parameters: DrawImage (IMG, x, y);

  • IMG image object, canvas object, video object
  • x. Y the upper left corner of the picture

Five parameters: DrawImage (IMG, x, y, W, H);

  • IMG image object, canvas object, video object
  • x. Y the upper left corner of the picture
  • w. H ﹣ image drawing size setting (image zooming, not interception)

Nine parameters: DrawImage (IMG, x, y, W, h, x1, Y1, W1, H1);

  • IMG image object, canvas object, video object
  • x. Y the upper left corner of the picture
  • w. H ﹣ image drawing size setting (image zooming, not interception)
  • X1, Y1, W1, H1 – a rectangular area in the canvas
  • coordinate transformation

Pan to move the dots on the canvas

translate(x.y)The parameter represents the coordinates of the moving target point

zoom

scale(x,y)The; parameter represents the scale of width and height

rotate

rotate(angle)The parameter represents the rotation angle

 

Reference documents:

w3school    http://www.w3school.com.cn/tags/html_ref_canvas.asp

Canvas_API   https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial