Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to make a five-pointed star in html5", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to make a five-pointed star in html5" article.

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:

Var canvas = document.getElementById ("canvas"); var context = canvas.getContext ("2d"); context.beginPath (); / / set the coordinates of a vertex, and make the path for based on the vertex (var I = 0; I < 5) ITunes +) {context.lineTo (Math.cos ((18+i*72) / 180*Math.PI) * 2001200,-Math.sin ((18+i*72) / 180*Math.PI) * 2001200); context.lineTo (Math.cos ((54+i*72) / 180*Math.PI) * 80mm 200,-Math.sin ((54+i*72) / 180*Math.PI) * 80th 200) } context.closePath (); / / set border style and fill color context.lineWidth= "3"; context.fillStyle = "# F6F152"; context.strokeStyle = "# F5270B"; context.fill (); context.stroke ()

Final effect:

The above is about the content of this article on "how to make a five-pointed star in html5". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.