Who has used html5 canvas to draw a five-pointed star_html/css_WEB-ITnose

//画五角星function draw11(id) {    var myCanvas = document.getElementById(id);    var context = myCanvas.getContext("2d");    //创建五角星    var shape = {};    shape.star = function (l) {        var rad1 = Math.sin(0.4 * Math.PI);     //sin(72)        var rad2 = Math.cos(0.4 * Math.PI);	  //cos(72)        var rad3 = Math.sin(0.2 * Math.PI);	  //sin(36)        var rad4 = Math.cos(0.2 * Math.PI);	  //cos(36)        with (context) {            moveTo(0, -l * rad1);            lineTo(l * rad2, -10);            lineTo(l + l * rad2, 0);            lineTo(l * rad2 + 2 * l * rad2 * rad2, l * rad3);            lineTo(l * rad4, 2 * l * rad1 * rad1 - l * rad1 + l * rad3);            lineTo(0, 2 * l * rad1 * rad1 - l * rad1);            lineTo(-l * rad4, 2 * l * rad1 * rad1 - l * rad1 + l * rad3);            lineTo(-l * rad2 - 2 * l * rad2 * rad2, l * rad3);            lineTo(-l - l * rad2, 0);            lineTo(-l * rad2, 0);            lineTo(0, -l * rad1);        }    }      // context.translate(10, 10);    context.beginPath();    //context.scale(1, 1);    //context.rotate(5);    //context.translate(-100, -100);    shape.star(30);    context.fillStyle = "red";    context.fill();    context.strokeStyle = "black";   context.stroke();    }

This is an example I found online. I removed the scale and translate below because offsets will occur when drawing repeatedly in a canvas.

My goal is to get a five-pointed star to be displayed in the middle of this canvas. No matter how many times I draw it, it must be in the same position.

Please help me, please

Reply to the discussion (solution)

The problem has been solved, come and answer the question in person

Waiting for the answer Points

Let’s take the points and see how to solve it.