HTML5 canvas (Basic rectangle)

Let's start with the simple

FillRect (X,y,width,height)

In the coordinates x, y position plus a width, high as:

FillRect (0,0,500,500)//fill rectangle with a width height of 500 at coordinates 0, 0

Strokerect (X,y,width,height)

Add a wide, high-bounding rectangle to the coordinates x, y position

But you'll need to use the Linewidth,linejoin,strokestyle,miterlimit setting below to give the rectangle function

Clearrect (X,y,width,height)

Clear coordinates x, y position is wide, the height of the area is completely transparent

Feel a bit like using PS when a black layer, pull a rectangular marquee, and then press a delect feeling a piece of transparent

Then set the Fill style

Context.fillstyle= ' #000000 '    //Fill Color context.strokestyle= ' #ff00ff '    //Border color

Full code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The result is such a
If you do not understand the previous structure, you can read my previous article http://www.cnblogs.com/LoveOrHate/p/4388321.html
HTML5 canvas (Basic rectangle)