تقدم هذه المقالة قماش HTML5 لتحقيق شريط تقدم دائري وعرض مثال على النسبة المئوية الرقمية.
تحقيق التأثير
1. أولاً إنشاء رمز HTML
<canvas id = canvas عرض = 500 ارتفاع = 500 نمط = الخلفية:#000 ؛> </canvas>
2. إنشاء بيئة قماش
var canvas = document.getElementById ('canvas') ، // get canvas element contex النقطة X -Axis Covers Center = Canvas.Height/2 ، // Canvas Center Point y -axis toipinates Rad = Math.Pi*2/100 ، // divide 360 degrees to السرعة = 0.1 ؛ / / تحميل سريع وبطيء ، فقط اعتمد عليها3. ارسم 5 بكسل دوائر رياضية خارجية
// 绘制 5 像素宽的运动外圈 blueCircle (n) {context.save () ؛ ) ؛ زاوية ، في اتجاه عقارب الساعة) سياق.4. ارسم الخاتم الخارجي الأبيض
// draw the white circle whitecircle () {context.save () ؛ كاذبة) ؛5. في المئة رسم نص
وظيفة الوظيفة (n) {context.save () ؛ // قم بتعيين حجم الخط والخط ، وسياق الموضع المحدد الرسومات. restore () ؛}6. دعها تمارس الرياضة
// دورة الرسوم المتحركة (وظيفة drawFrame () {window.requestanimationFrame (drawFrame) ؛ context.clearrect (0 ، 0 ، canvas.width ، canvas.hight) ؛ whitecircle () ؛ te xt (speed) ؛ blueCircle (السرعة) ؛ إذا (إذا (السرعة> 100) السرعة = 0 ؛ السرعة+= 0.1 ؛} ()) ؛رمز كامل
<! {text-align: Center ؛ script> window.onload = function () {var canvas = document.getElementById ('canvas') ، // get canvas element context = canvas.getContex 2d centerx = canvas.width/2 ، // canvas center point x -axis cendry = canvas.height/2 ، // canvas center point y -axis rad = math.pi*2/00 ، // divide 360 degrees إلى 100 للأجزاء ، كل جزء هو سرعة درجة RAD = 0.1 ؛ ؛ .pi/2 ، -math.pi/2 +n*rad ، false) ؛ () ؛ ؛ ) ؛ / قم بتعيين نمط الرسم. ، Center 10) ؛ 0.1 ؛} ()) ؛} </script> </body> </html>ما سبق هو كل محتويات هذا المقال.