HTML5 draw a rectangle on canvas

Author: Benedict Ching June

Original address: http://blog.csdn.net/qingdujun/article/details/32930501

First, draw the rectangle

The canvas uses the origin point (0,0) in the upper-left coordinate system and increments the x-coordinate to the right. The y-coordinate is incremented downward.

Draws a rectangle using the rectangle drawing function of the paint environment.

• FillRect (x,y,width,height) : Draws a solid rectangle.
• Strokerect (x,y,width,height) : Draws a hollow rectangle.
• Clearrect (x,y,width,height) : Clears the specified rectangular area. Make it completely transparent.

Second, draw a rectangle in the canvas

<!--<! The doctype> declaration must be the first line of the HTML document. Located before the 
Third, the effect of drawing

Reference: (print) Shankar's (SHANKAR,A.R.) (author). Xieguang lei (translator). Advanced Guide to HTML5 game development [M]. Beijing: Electronic industry Press, 2013.3-5.

HTML5 draw a rectangle on canvas