Implementation method of Canvas polygon drawing

Drawing multiple deformations with Canvas is very simple. You only need to understand Canvas paths + simple junior high school mathematics knowledge to complete it.

CodePen opens

The idea is as above, very simple, just calculate the position of each point and draw the path through lineTo()

The core code is parsed as follows (or viewed in CodePen):

 function drawPolygonPath(sideNum, radius, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; //Calculate unit angle let angle = 0; //Initial angle let xLength, yLength; // ctx.moveTo(originX, originY); for(let i = 0; i < sideNum; i++){ //Traverse the calculation points and draw the path with lineTo() xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); ctx.lineTo(originX + xLength, originY - yLength); //Draw Path angle += unitAngle; } ctx.closePath();//Closed path, you can also loop lineTo() one more time in the for loop to the starting point}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.