Рисовать множественные деформации с помощью Canvas очень просто. Для этого вам нужно всего лишь понять пути Canvas и простые знания математики в средней школе.
CodePen открывается
анализироватьИдея такая же, как и выше, очень простая: просто вычислите положение каждой точки и нарисуйте путь через lineTo().
Основной код анализируется следующим образом (или просматривается в CodePen):
function drawPolygonPath(sideNum, radius, originX, originY, ctx) { ctx.beginPath(); const unitAngle = Math.PI * 2 /sideNum; //Вычисляем единичный угол let angular = 0; //Начальный угол let xLength, yLength; // ctx.moveTo(originX, originY); for(let i = 0; i <sideNum; i++){ //Обходим расчетные точки и рисуем путь с помощью lineTo() xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); ctx.lineTo(originX + xLength, originY - yLength); / /Draw Path angular += unitAngle; } ctx.closePath();//Закрытый путь, вы также можете выполнить цикл lineTo() еще раз в цикле for до начальной точки}Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.