วิธีการวาดเส้นประบนผืนผ้าใบโดยใช้ฟังก์ชันตรีโกณมิติ

เนื่องจาก canvas api ไม่มีเส้นประ

ดังนั้นคุณต้องดำเนินการด้วยตนเอง

คงจะดีไม่น้อยหากจะทบทวนฟังก์ชันตรีโกณมิติ?

 var context=document.getElementById(canvas).getContext(2d);ฟังก์ชั่น DrawDashedLine(บริบท,x1,y1,x2,y2,dashlength){ dashlength=dashlength===unknown?5:dashlength; //ความยาวของด้านมุมฉาก var deltay=y2-y1; //ความยาวของด้านคำสั่งอื่น var numDashes=Math.floor( Math.sqrt(deltaX*deltaX+deltay*deltay)/dashlength //Math.sqrt ส่งคืนรากที่สองของความยาวประของตัวเลขและความยาวของแต่ละจุดของเส้นประ) var everydashLength_x=deltaX/numDashes //กำหนดทุกจุดบนแกน X จุดเริ่มต้นของจุดเส้นประ var everydashLength_y=deltay/numDashes //กำหนดจุดเริ่มต้นของแต่ละจุดเส้นประบนแกน Y for(var i=0;i<numDashes;i++){ context[i%2===0?'moveTo':lineTo] (x1+everydashLength_x* ฉัน,y1 +ทุกๆ dashLength_y*i) } บริบท.จังหวะ()}context.lineWidth=3context. strokeStyle=bluedrawDashedLine(บริบท,20,20,context.canvas.width-20,20,20)

เอฟเฟกต์ดังแสดงในรูป

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