บทความนี้แนะนำ HTML5 Canvas เพื่อให้ได้แถบความคืบหน้าแบบวงกลมและแสดงตัวอย่างเอฟเฟกต์เปอร์เซ็นต์ดิจิตอล
บรรลุผล
1. ก่อนสร้างรหัส HTML
<canvas id = ความกว้างของผ้าใบ = 500 ความสูง = 500 style = พื้นหลัง:#000;> </anvas>
2. สร้างสภาพแวดล้อมผ้าใบ
var canvas = document.getElementById ('canvas'), // รับบริบทองค์ประกอบของ Canvas = Canvas.getContext ('2d'), // รับสภาพแวดล้อมการวาดระบุว่าเป็น 2D centerx = canvas.width/2, // Canva Center จุด x -axis พิกัดศูนย์ = canvas.height/2, // canvas center point จุด y -axis พิกัด rad = math.pi*2/100, // แบ่ง 360 องศาเป็น 100 สำเนา ความเร็ว = 0.1; / / โหลดเร็วและช้าเพียงพึ่งพามัน3. วาด 5 พิกเซลความกว้างกีฬาวงกลม
// 绘制 5 像素宽的运动外圈ฟังก์ชั่น bluecircle (n) {context.save (); ); มุม, contexts.stroke ();4. วาดวงแหวนรอบนอกสีขาว
// วาดฟังก์ชั่นวงกลมสีขาว Whitecircle () {context.save (); , false);5. การวาดข้อความเปอร์เซ็นต์
ฟังก์ชั่นข้อความ (n) {context.save (); // ตั้งค่าตัวอักษรและตัวอักษร // วาดตัวอักษรและบริบทตำแหน่งที่ระบุ Stroketext (n.tofixed (0)+%, centerx-25, ศูนย์กลาง+10); Drawings.restore ();}6. ปล่อยให้มันออกกำลังกาย
// วงจรภาพเคลื่อนไหว (ฟังก์ชั่น drawFrame () {window.requestanimationFrame (drawFrame); context.clearRect (0, 0, Canvas.width, Canvas.height); whitecircle (); te xt (ความเร็ว); bluecircle (ความเร็ว); ถ้า (ถ้า (ความเร็ว> 100) ความเร็ว = 0; ความเร็ว+= 0.1;} ());กรอกรหัส
<! {text-allign: center; color-color: #000;} </style> </head> <body> <canvas id = canvas width = 500 height = 500 style = background: #000;> </canvas> สคริปต์> window.onload = function () {var canvas = document.getElementById ('canvas'), // รับ canvas element context = canvas.getContext ('2d') 2d centerx = canvas.width/2, // canvas center point x -axis cendry = canvas.height/2, // canvas center point y -axis rad = math.pi*2/100, // หาร 360 องศา เป็น 100 สำหรับบางส่วนคือความเร็ว rad = 0.1; strokestyle = #fff; 2, -math.pi/ 2 +n*rad, false); // วาดบริบทการวาดภาพ closepath (); LineWidth = 2; .rest.restore (); รูปแบบการวาดรูปแบบการวาดรูปแบบ = 40px 10); ());} </script> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้