طريقة تنفيذ الرسم المضلع على القماش

يعد رسم تشوهات متعددة باستخدام Canvas أمرًا بسيطًا للغاية، ما عليك سوى فهم مسارات Canvas + معرفة بسيطة بالرياضيات في المدرسة الإعدادية لإكمالها.

يفتح كود بن

الفكرة كما هو مذكور أعلاه بسيطة جدًا، ما عليك سوى حساب موضع كل نقطة ورسم المسار من خلال lineTo()

يتم تحليل الكود الأساسي على النحو التالي (أو يتم عرضه في CodePen):

 function drawPolygonPath(sideNum, radius, OriginX, OriginY, ctx){ ctx.beginPath(); const UnitAngle = Math.PI * 2 / SideNum; // احسب زاوية الوحدة Let angle = 0; // ctx.moveTo(originX, OriginY); for(let i = 0; i < SideNum; i++){ // اجتياز نقاط الحساب ورسم المسار باستخدام lineTo() xLength = radius * Math.cos(angle); / ارسم زاوية المسار += UnitAngle; } ctx. ClosePath();// مسار مغلق، يمكنك أيضًا تكرار lineTo() مرة أخرى في حلقة for إلى نقطة البداية}

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.