บทความนี้ส่วนใหญ่แนะนำวิธีง่ายๆในการใช้ผ้าใบ HTML5 เพื่อวาดเส้นโค้ง มันเป็นความรู้พื้นฐานในการแนะนำ HTML5 เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
วิธีเส้นโค้งของ Canvas2D
เมื่อเร็ว ๆ นี้ฉันกำลังศึกษาการคำนวณของร่างกายที่อ่อนนุ่ม 3D ดังนั้นฉันจึงเพิ่มความรู้ มันมักจะเกี่ยวข้องกับการวิเคราะห์เชิงตัวเลขส่วนใหญ่อัลกอริทึมการแก้ไขต่าง ๆ สำหรับเส้นโค้ง ทันใดนั้นฉันก็จำได้ว่า Canvas2D นั้นสามารถวาดเส้นโค้งได้โดยใช้เส้นโค้งกำลังสองและ Cube Baz จริงๆแล้วฉันยังไม่ได้ใช้วิธีนี้มาลองเลย ~
บทความนี้เป็นเรื่องเกี่ยวกับการวาดเส้นโค้งที่เรียบง่ายดังนั้นอย่าพูดถึงหลักการที่ซับซ้อนมากมาย นอกจากนี้หลักการของเส้นโค้ง Baz นั้นง่ายมากคุณสามารถเข้าใจได้ด้วยการดูวิกิพีเดีย ในความเป็นจริงเครื่องมือวาดเส้นโค้งแบบง่าย ๆ มากมายใช้เส้นโค้ง BAZ หากคุณใช้เส้นโค้งในเครื่องมือวาดภาพของ Windows คุณต้องคุ้นเคยกับมัน คุณสามารถลากเส้นตรงก่อนจากนั้นคลิกตำแหน่งที่แน่นอนเพื่อทำให้เส้นตรงบิด การดำเนินการลากเริ่มต้นจะกำหนดจุดยอดทั้งสองของเส้นโค้งและการดำเนินการคลิกเพิ่มจุดกลาง เครื่องมือวาดภาพที่มาพร้อมกับ Windows ใช้เส้นโค้งลูกบาศก์ BAZ และคุณสามารถเพิ่มสองจุดกลาง เส้นโค้ง Bate นั้นแตกต่างจากการแก้ไขพหุนามทั่วไป จุดกลางของมันใช้เป็นจุดควบคุมเท่านั้นไม่ใช่จุดสุดยอดที่เส้นโค้งต้องผ่าน และมันยังสามารถทำเส้นโค้งปิด Canvas2D มีสองวิธีในการวาดเส้นโค้ง
quadraticcurveto: โค้ง Baze Quadratic
beziercurveto: เส้นโค้ง bezel ลูกบาศก์
บรรทัดถูกดึงออกมาจากตำแหน่งปัจจุบันและตำแหน่งปัจจุบันสามารถระบุได้โดยวิธี Moveto ด้วยตำแหน่งเริ่มต้นของเส้นโค้งจุดกลางและตำแหน่งสิ้นสุดก็จำเป็นเช่นกัน เพียงแค่ผ่านตำแหน่งพิกัดเหล่านี้ไปยังฟังก์ชั่นการวาด ตัวอย่างเช่นเส้นโค้ง Batez กำลังสองต้องใช้จุดกลางและตำแหน่งสิ้นสุดดังนั้นพิกัดสองอย่างจะต้องส่งผ่านไปยังฟังก์ชัน quadraticcurveto พิกัดประกอบด้วย X และ Y ซึ่งหมายความว่าฟังก์ชั่นนี้มีพารามิเตอร์ 4 ตัว Beziercurveto เหมือนกันยกเว้นว่ามีสองจุดกลาง มาใช้กันเลย
CSS รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด