How to draw a five-pointed star in H5

This time I will show you how to draw a five-pointed star using H5. How to draw a five-pointed star using H5? What are the precautions for drawing a five-pointed star in H5? The following is a practical case, let’s take a look.

is a new tag in HTML5, used to draw graphics. In fact, this tag is the same as other tags. The special thing is that this tag can obtain a CanvasRenderingContext2D Object, we can control the object for drawing through JavaScript script.

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() method of the Canvas object to get a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for drawing.

By analyzing the five-pointed star, we can determine the rules of the coordinates of each vertex. One thing to note here is: in the canvas, the direction of the Y-axis is downward.

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
    //设置是个顶点的坐标，根据顶点制定路径   
    for (var i = 0; i < 5; i++) {   
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+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();   
    //设置边框样式以及填充颜色   
    context.lineWidth="3";   
    context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use regular expressionsMatch IP addresses and domain names

What kind of regular expressions can Show highlight

How to upload avatar in WeChat applet

The above is the detailed content of How to draw a five-pointed star in H5. For more information, please follow other related articles on the PHP Chinese website!