วิธีการปรับใช้การวาดรูปหลายเหลี่ยมบนแคนวาส

การวาดรูปแบบต่างๆ ด้วย Canvas นั้นง่ายมาก คุณเพียงแค่ต้องเข้าใจเส้นทางของ Canvas + ความรู้ทางคณิตศาสตร์ระดับมัธยมศึกษาตอนต้นเท่านั้นจึงจะเสร็จสมบูรณ์

CodePen จะเปิดขึ้น

แนวคิดดังที่กล่าวมาข้างต้น ง่ายมาก เพียงคำนวณตำแหน่งของแต่ละจุดแล้ววาดเส้นทางผ่าน lineTo()

รหัสหลักจะถูกแยกวิเคราะห์ดังนี้ (หรือดูใน CodePen):

 ฟังก์ชั่น DrawPolygonPath(sideNum, radius, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; // คำนวณมุมหน่วย ให้มุม = 0; // มุมเริ่มต้น ให้ xLength, yLength; // 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();//ปิดพาธ คุณยังสามารถวนซ้ำ lineTo() อีกครั้งใน for วนซ้ำไปยังจุดเริ่มต้น}

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network