Canvas を使用して複数の変形を描画するのは非常に簡単です。Canvas のパスと簡単な中学数学の知識だけで完成します。
コードペンが開きます
解析するアイデアは上記のとおりで、非常に単純です。各点の位置を計算し、lineTo() を通じてパスを描画するだけです。
コア コードは次のように解析されます (または CodePen で表示されます)。
functiondrawPolygonPath(sideNum,radius,originX,originY,ctx){ ctx.beginPath(); //単位角度を計算 let angle = 0; // ctx.moveTo(originX,originY); for(let i = 0; i <sideNum; i++){ // lineTo() で計算点を移動し、パスを描画します。 xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); /Draw Path angle += UnitAngle; } ctx.closePath();//閉じたパス、for ループでもう一度 lineTo() を開始点までループすることもできます。以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。