HTML5 draws complex shapes in canvas

Author: Qing Dujun

Address: http://blog.csdn.net/qingdujun/article/details/32942667

1. Draw complex shapes or paths

When a simple rectangle cannot meet the requirements, the following method is provided for drawing a complex shape or path.

• BeginPath (): start to draw a new path.
• ClosePath (): draws a line segment from the current point to the starting point of the path to close the shape.
• Fill (), stroke (): fill shape or draw hollow shape.
• MoveTo (): Move the current vertex to the point (x, y ).
• LineTo (): draws a straight line (x, y) from the current point ).
• Arc (x, y, r, sAngle, eAngle, counterclockwise): draws an arc-to-point (x, y) with a specified radius ).

2. Follow these steps to draw complex shapes

Iii. arc () Rendering instructions

4. Draw complex shapes in the canvas

<! -- <! DOCTYPE> Declaration must be the first line of the HTML document, located before the 
5. Draw Results




References: (printed) Shankar (. R .) (author ). xie Guanglei (translator ). HTML5 game development advanced Guide [M]. beijing: Electronics Industry Press, 2013.5-7.

W3School. HTML5canvas arc () method [CP/OL]. http://www.w3school.com.cn/tags/canvas_arc.asp ,? /2014-06-21.