HTML5 canvas basic drawing: drawing five-pointed star

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 Get 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, 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: