Draw a rectangle for HTML5 canvas Basic Drawing, html5canvas

Draw a rectangle for HTML5 canvas Basic Drawing, html5canvas

<Canvas> </canvas>It is just a container for drawing graphics. In addition to attributes such as id, class, and style, there are also attributes of height and width. There are three steps to draw an element on the <canvas> element:

1. Obtain the DOM object corresponding to the <canvas> element. This is a Canvas object;
2. Call the getContext () method of the Canvas object to obtain a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for plotting.

Draw rectangular rect (), fillRect (), and strokeRect ()

• Context. rect (x, y, width, height): defines only the path of the rectangle;
• Context. fillRect (x, y, width, height): draws a filled rectangle;
• Context. strokeRect (x, y, width, height): draws a rectangular border directly;

Copy the content to the clipboard using JavaScript Code

1. <Script type = "text/javascript">
2. Var canvas = document. getElementById ("canvas ");
3. Var context = canvas. getContext ("2d ");
5. // Use the rect Method
6. Context. rect (10, 10, 190,190 );
7. Context. lineWidth = 2;
8. Context. fillStyle = "# 3EE4CB ";
9. Context. strokeStyle = "# F5270B ";
10. Context. fill ();
11. Context. stroke ();
13. // Use the fillRect Method
14. Context. fillStyle = "# 1424DE ";
15. Context. fillRect (190,190 );
17. // Use the strokeRect Method
18. Context. strokeStyle = "# F5270B ";
19. Context. strokeRect (values, 10, 190,190 );
21. // Use both the strokeRect method and fillRect Method
22. Context. fillStyle = "# 1424DE ";
23. Context. strokeStyle = "# F5270B ";
24. Context. strokeRect (190,190, 10 );
25. Context. fillRect (610,10, 190,190 );
26. </Script>

Here we need to explain two points: the first point is the sequence of drawing between stroke () and fill (). If fill () is drawn after, when the stroke border is large, it will obviously overwrite the border drawn by stroke (). The second point: when setting the fillStyle or strokeStyle attribute, you can use "rgba (0.2, 0) ". The last parameter of this setting is transparency.

There is also an area related to rectangular painting: Clear the rectangular area: context. clearRect (x, y, width, height ).
The receiving parameters are respectively the starting position of the rectangle and the width and length of the rectangle.
In the above Code, add:

Context. clearRect (600,100, 60 );

You can get the following results:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.