บันทึกการศึกษาผืนผ้าใบ: การวาดเส้นทางง่ายๆ

ขั้นตอนทั่วไปในการวาดส่วนของเส้น:

moveTo(x,y) ย้ายแปรงไปยังจุดพิกัดที่ระบุ (x,y)

lineTo(x,y) ใช้เส้นตรงเพื่อเชื่อมต่อจุดสิ้นสุดปัจจุบันและจุดพิกัดที่ระบุ (x,y)

stroke() วาดเส้นทางปัจจุบันหรือที่มีอยู่ตามรูปแบบการวาดเส้นปัจจุบัน

ขั้นตอนทั่วไปในการวาดเส้นทางสี่เหลี่ยม:

สี่เหลี่ยมผืนผ้า (x, y, ความกว้าง, ความสูง) เส้นทางพิกัด (x, y), ความกว้างความสูง

stroke() หรือ fill ดึงหรือเติมพาธตามสไตล์ปัจจุบัน

คุณยังสามารถใช้ strokeRect หรือ fillRect ที่กล่าวถึงข้างต้น หรือประกบกันเป็นสี่เหลี่ยมผืนผ้าผ่าน lineTo

ก่อนอื่น มาดู API สำหรับการวาดส่วนโค้งกันก่อน:

ctx.arc(x, y, รัศมี, startAngle, endAngle, ทวนเข็มนาฬิกา);

x, จุดศูนย์กลางส่วนโค้ง y, รัศมีส่วนโค้งรัศมี, จุดเริ่มต้น startAngle, จุดสิ้นสุดส่วนโค้ง endAngle, ค่าเริ่มต้นทวนเข็มนาฬิกาเป็นตามเข็มนาฬิกา, ทวนเข็มนาฬิกาจริง

การหมุนทั้งหมดใน CSS จะใช้มุม (องศา) แต่หน่วยที่ใช้แสดงมุมในฟังก์ชันส่วนโค้งคือเรเดียน ไม่ใช่มุม การแสดงออกของมุมและเรเดียน JS: เรเดียน = (Math.PI/180) * มุม (องศา)

เรเดียนที่นี่คำนวณตามทิศทางบวกของแกน x และมุมของการหมุนตามเข็มนาฬิกาตามค่าเริ่มต้น

ภาพประกอบ:

(ภาพจากทะเลทราย)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx.closePath();ctx. stroke();ctx.fill();

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