Html5 canvas (Basic rectangle) and html5canvas rectangle

Html5 canvas (Basic rectangle) and html5canvas rectangle

Start with a simple

fillRect(x,y,width,height)

Add a width to the coordinates x and y, and the height is as follows:

FillRect (500,500, 500) // Add a rectangle with a width and a height of at coordinate

 

strokeRect(x,y,width,height)

Add a wide, high border rectangle to the coordinates x and y.

However, you need to use lineWidth, lineJoin, strokeStyle, and miterLimit to setThe following describes the rectangle function.

clearRect(x,y,width,height)

Clear the coordinates x and y. The height is completely transparent.

It feels a bit like a black layer in ps, pulling a rectangle and selecting a box, and then clicking a delect will make it transparent.

 

Set the filling style.

Context. fillStyle = '# 000000' // fill color context. strokeStyle =' # ff00ff '// border color

 

Complete code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
The result is
If you don't know the previous structure, you can view my previous http://www.cnblogs.com/LoveOrHate/p/4388321.html.