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 aCanvasGradient object or aCanvasPattern 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绘制三角形入门示例
The corresponding display effect is as follows:
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绘制矩形入门示例
is displayed as follows:
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!