How to make a five-pointed star in html5

In HTML5, you can draw a five-pointed star through the canvas tag and related JavaScript properties and methods; the canvas tag is used to dynamically draw graphics through scripts (usually JavaScript).

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

is a new tag in HTML5, used for drawing graphics. This article mainly introduces the basic drawing of HTML5 canvas in detail and the method of drawing a five-pointed star. Interested friends can refer to

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

is just a container for drawing graphics. In addition to attributes such as id, class, and style, 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( of the Canvas object ) method 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.

The corresponding code is as follows:

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();

Final effect:

More programming related knowledge, Please visit: programming video! !

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