How to use HTML5 Canvas to draw polygons such as triangles and rectangles-H5 Tutorial-php.cn

This article mainly introduces the method of drawing polygons such as triangles and rectangles with the help of HTML5 Canvas. Through some attributes given at the beginning of the article and the examples of triangles and rectangles below, the same method can be used to draw other polygons. You need to Friends can refer to the following

The main properties and methods of the CanvasRenderingContext2D object required to draw polygons using HTML5 Canvas (those with "()" are methods) are as follows:

Properties or methods	Basic description
strokeStyle	Used to set the color, gradient and mode of the brush drawing path. The value of this property can be a string representing the CSS color value. If your drawing requirements are more complex, the value of this property can also be a`CanvasGradient`object or a`CanvasPattern`object
globalAlpha	Define the transparency of the drawn content, the value is between 0.0 (completely transparent) and 1.0 (completely opaque), the default value is 1.0.
lineWidth	Define the width of the drawn line. The default value is 1.0, and this property must be greater than 0.0. The wider line is centered on the path, with half the line width on each side.
lineCap	Specify how to draw the line caps at both ends of the line. Legal values are butt, round, and square. The default value is "butt".
beginPath()	Start a new drawing path. Remember to call this method every time before drawing a new path.
moveTo(int x, int y)	Define the starting point coordinates of a new drawing path
lineTo(int x, int y)	Define the coordinates of the midpoint of a drawing path
stroke(int x, int y)	along the drawing path Draw straight lines sequentially with coordinate points
closePath()	If the current drawing path is open, close the drawing path.

Drawing a triangle

    HTML5 Canvas绘制三角形入门示例

Copy after login

The corresponding display effect is as follows:

2016314112438272.png (421×318)

Drawing a rectangle
The reason why Canvas drawing rectangle is mentioned separately is because the Canvas brush tool-CanvasRenderingContext2D object provides a dedicated method for drawing rectangles. The corresponding rectangular effect of

    HTML5 Canvas绘制矩形入门示例

Copy after login

is displayed as follows:
2016314112508746.png (422×310)

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to PHP Chinese net!

Related recommendations:

HTML5 and CSS3 Realize the switching effect of spiritual animation

The above is the detailed content of How to use HTML5 Canvas to draw polygons such as triangles and rectangles. For more information, please follow other related articles on the PHP Chinese website!