How to draw pentagram with canvas of HTML5

This article mainly explains "how to draw a pentagram with HTML5 canvas". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to draw a pentagram with HTML5's canvas".

Is a new tag in HTML5, used to draw graphics, in fact, this tag is the same as other tags, its special feature is that the tag can get a CanvasRenderingContext2D object, we can use JavaScript script to control the object to draw.

It's just a container for drawing graphics, with height and width properties in addition to id, class, style, and so on. There are three main steps to draw on the > element:

1. Gets the DOM object corresponding to the element, which is a Canvas object

two。 Call the getContext () method of the Canvas object to get a CanvasRenderingContext2D object

3. Call the CanvasRenderingContext2D object to draw.

Through the analysis of the pentagram, we can determine the law of the coordinates of each vertex. One thing to note here is that in canvas, the direction of the Y axis is downward.

The corresponding code is as follows:

JavaScript Code copies content to the clipboard

Var canvas = document.getElementById ("canvas")

Var context = canvas.getContext ("2d")

Context.beginPath ()

/ / set the coordinates of a vertex and make the path according to the vertex

For (var I = 0; I < 5; iTunes +) {

Context.lineTo (Math.cos ((18+i*72) / 180*Math.PI) * 20000200

-Math.sin ((18+i*72) / 180*Math.PI) * 2002,200)

Context.lineTo (Math.cos ((54+i*72) / 180*Math.PI) * 80,200

-Math.sin ((54+i*72) / 180*Math.PI) * 80,200)

}

Context.closePath ()

/ / set border style and fill color

Context.lineWidth= "3"

Context.fillStyle = "# F6F152"

Context.strokeStyle = "# F5270B"

Context.fill ()

Context.stroke ()

At this point, I believe you have a deeper understanding of "how to draw a pentagram with HTML5 canvas". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!