HTML5 canvas basic drawing: drawing rectangle

is a new tag in HTML5, used for drawing graphics. This article mainly introduces the basic drawing method of HTML5 canvas to draw rectangles in detail. Interested friends can For reference

is just a container for drawing graphics. In addition to attributes such as id, class, style, etc., it also has height and width attributes. There are three main steps for drawing on the > element:

1. Get the DOM object corresponding to the element, which is a Canvas object;
2. Call the getContext( of the Canvas object ) method to get a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for drawing.

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

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

JavaScript CodeCopy content to clipboard

2. var canvas = document.getElementById("canvas");

3. var context = canvas.getContext("2d");

5. //Use 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 fillRect method

14. context.fillStyle =

    "#1424DE";

15. context.fillRect(210,10,190,190);

17. //Use the strokeRect method

18. context.strokeStyle =

    "#F5270B";

19. context.strokeRect(410,10,190,190);

21. //Use strokeRect method and fillRect method at the same time

context.fillStyle =
22. "#1424DE"

    ;

    ## context.strokeStyle =
" #F5270B"
23. ;
    context.strokeRect(610,10,190,190);

24. context.fillRect(610,10,190,190);

##here Two points need to be explained: The first point is the order in which stroke() and fill() are drawn. If fill() is drawn later, then when the stroke border is larger, half of the border drawn by stroke() will be obviously covered. ;Second point: When setting the fillStyle or strokeStyle attribute, you can set it through the "rgba(255,0,0,0.2)" setting method. The last parameter of this setting is transparency.

There is another one related to rectangular drawing: clearing the rectangular area: context.clearRect(x,y,width,height).

The received parameters are: clear the starting position of the rectangle and the width and length of the rectangle.

In the above code, add at the end of drawing the graphics:

context.clearRect(100,60,600,100);

The following effect can be obtained:

The above is the detailed content of HTML5 canvas basic drawing: drawing rectangle. For more information, please follow other related articles on the PHP Chinese website!