การเรนเดอร์ครั้งสุดท้าย1. กำหนดตัวแปร
กำหนดรัศมี กำหนดความหนาของวงแหวน กำหนดตำแหน่งศูนย์กลางของวงกลม และกำหนดสีเติมเริ่มต้น
ให้รัศมี = 75 ให้ความหนา = 10 ให้ innerRadius = รัศมี - ความหนาให้ x = 75 ให้ y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = #f2d7d7; 2. วาดส่วนโค้งแรก ctx.beginPath();ctx.arc(x, y, รัศมี, Math.PI * 1.5, Math.PI)
ให้ความสนใจกับเมธอด beginningPath() ซึ่งเป็นขั้นตอนแรกในการสร้างเส้นทาง โดยพื้นฐานแล้ว เส้นทางประกอบด้วยเส้นทางย่อยจำนวนมาก ซึ่งทั้งหมดอยู่ในรายการ และเส้นทางย่อยทั้งหมด (เส้น ส่วนโค้ง ฯลฯ) ก่อตัวเป็นรูปร่าง ทุกครั้งที่เรียกใช้เมธอดนี้ รายการจะถูกล้างและรีเซ็ต จากนั้นเราจะวาดกราฟใหม่ได้
กล่าวอีกนัยหนึ่ง สามารถใช้วิธีนี้เพื่อจัดกลุ่มรูปภาพ Canvas และวาดกราฟิกใหม่ได้ หากไม่ได้เรียกใช้วิธีนี้ กราฟิกใหม่จะเชื่อมต่อกับกราฟิกก่อนหน้า
3. วาดการเชื่อมต่อครั้งแรกctx.quadraticCurveTo((x - innerRadius) - ความหนา / 2, y - ความหนา, x - innerRadius, y)
การเชื่อมต่อถูกวาดโดยใช้เส้นโค้ง Bezier กำลังสอง วิธี QuadraticCurveTo(cp1x, cp1y, x, y) ของ Canvas ยอมรับพารามิเตอร์ 4 ตัวคือจุดควบคุม และพารามิเตอร์ตัวที่สามและสี่เป็นจุดสิ้นสุด เอกสารอย่างเป็นทางการ
เพียงหาจุดควบคุมและจุดสิ้นสุดเพื่อวาดส่วนโค้ง
4. วาดส่วนโค้งที่สองctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, จริง)
ให้ความสนใจกับพารามิเตอร์สุดท้ายหลังวิธีการ ตั้งค่าเป็นจริง ซึ่งหมายถึงการวาดทวนเข็มนาฬิกา (ค่าเริ่มต้นคือตามเข็มนาฬิกา)
5. วาดการเชื่อมต่อที่สองctx.quadraticCurveTo(y - ความหนา (x - innerRadius) - ความหนา / 2, x, y - innerRadius - ความหนา)
ขั้นตอนนี้ไม่แตกต่างจากขั้นตอนที่สามมากนัก เราเพียงแค่เปลี่ยนตำแหน่งพารามิเตอร์
6. การกรอกctx.เติม();
ณ จุดนี้ วงแหวนที่ไม่ปิดอย่างง่ายก็เสร็จสมบูรณ์
วาดวงแหวนแถบความคืบหน้าอันที่สอง
7. การเริ่มต้นctx.beginPath();ctx.fillStyle = #e87c7c;
beginningPath หมายถึง การวาดภาพกราฟิกใหม่ หากไม่ได้เรียกวิธีนี้ กราฟิกที่วาดในภายหลังจะถูกเชื่อมต่อกับกราฟิกที่วาดไว้ก่อนหน้านี้
8. วาดวงแหวนแถบความคืบหน้าที่สองctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, รัศมี, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + innerRadius) + ความหนา / 2, y + ความหนา, x + innerRadius, y)ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, จริง)ctx.quadraticCurveTo(y - ความหนา, (x - innerRadius) - ความหนา / 2, x, y - innerRadius - ความหนา)ctx.fill();
เนื่องจากวิธีการวาดจะเหมือนกับวงกลมแรกทุกประการ จึงไม่จำเป็นต้องทำซ้ำ แต่จะต่างกันเพียงส่วนโค้งของวงกลมเท่านั้น
9. หมุนผืนผ้าใบแปลงร่าง: หมุน (-135deg);
เนื่องจากการหมุน CSS สะดวกกว่าและบันทึกการคำนวณมุม ฉันจึงใช้การแปลง CSS เพื่อหมุน แน่นอนว่า Canvas ยังมีวิธีการหมุนอีกด้วย
รหัสที่สมบูรณ์
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA - เนื้อหาที่เข้ากันได้=ie=edge> <title>canvas</title> <style> .ring { width: 150px; height: 150px; ดิ้น align-items: center; justify-content: center; flex-direction: column; ขนาดตัวอักษร: 30px; ขนาดตัวอักษร: ตัวหนา; แบบอักษรน้ำหนัก: เบากว่า; } .title { สี: สีแดง; ด้านล่าง: 0; ตำแหน่ง: สัมบูรณ์; 150></canvas> <span class=fraction>100 <span class=small>คะแนน</span> </span> <span class=title>คะแนนบริการ</span> </div> <script> ให้รัศมี = 75 ให้ความหนา = 10 ให้ innerRadius = รัศมี - ความหนา ให้ x = 75 ให้ y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(x, y, รัศมี, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - ความหนา/2 , y - ความหนา, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, จริง) ctx.quadraticCurveTo(y - ความหนา (x - innerRadius) - ความหนา / 2, x, y - innerRadius - ความหนา) ctx.fill(); ctx.beginPath(); ctx.fillStyle = #e87c7c; ctx.arc(x, y, รัศมี, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + ความหนา / 2, y + ความหนา, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, จริง) ctx.quadraticCurveTo(y - ความหนา, (x - innerRadius) - ความหนา / 2, x, y - innerRadius - ความหนา) ctx.fill(); </สคริปต์></ร่างกาย></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network