canvas環形百分比進度條效果
分享一段程式碼例項,它利用canvas實現了百分比環形進度條效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload = function() { window.onload = function() { var canvas = document.getElementById("canvas"); context = canvas.getContext('2d'); centerX = canvas.width / 2; centerY = canvas.height / 2; rad = Math.PI * 2 / 100; speed = 0.1; function blueCircle(n) { context.save(); context.strokeStyle = "#49f"; context.lineWidth = 5; context.beginPath(); context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); context.stroke(); context.closePath(); context.restore(); } function whiteCircle() { context.save(); context.strokeStyle = "white"; context.beginPath(); context.arc(centerX, centerY, 100, 0, Math.PI * 2, false); context.stroke(); context.closePath(); context.restore(); } function text(n) { context.save(); context.strokeStyle = "#49f"; context.font = "40px Arial"; context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10); context.stroke(); context.restore(); } (function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); whiteCircle(); text(speed); blueCircle(speed); if (speed > 100) speed = 0; speed += 0.1; }()); } var canvas = document.getElementById("canvas"); context = canvas.getContext('2d'); centerX = canvas.width / 2; centerY = canvas.height / 2; rad = Math.PI * 2 / 100; speed = 0.1; function blueCircle(n) { context.save(); context.strokeStyle = "#49f"; context.lineWidth = 5; context.beginPath(); context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); context.stroke(); context.closePath(); context.restore(); } function whiteCircle() { context.save(); context.strokeStyle = "white"; context.beginPath(); context.arc(centerX, centerY, 100, 0, Math.PI * 2, false); context.stroke(); context.closePath(); context.restore(); } function text(n) { context.save(); context.strokeStyle = "#49f"; context.font = "40px Arial"; context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10); context.stroke(); context.restore(); } (function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); whiteCircle(); text(speed); blueCircle(speed); if (speed > 100) speed = 0; speed += 0.1; }()); } </script> </head> <body> <canvas id="canvas" width="500" height="500" style="background:#000"></canvas> </body> </html>
相關文章
- canvas環形進度條效果Canvas
- canvas百分比環形進度條程式碼Canvas
- svg環形百分比進度條SVG
- 實現環形進度條效果【一】
- jQuery環形旋轉載入進度條效果jQuery
- canvas錐形漸變進度條Canvas
- 使用canvas繪製圓形進度條Canvas
- canvas的簡單圓形進度條Canvas
- js百分比載入進度條效果JS
- 用初中數學知識擼一個canvas環形進度條Canvas
- canvas圓形進度條註釋超全Canvas
- CSS3圓形進度條效果CSSS3
- canvas環形資料效果Canvas
- javascript百分比進度條效果程式碼例項JavaScript
- canvas 畫進度條Canvas
- canvas實現具有粒子效果的動態進度條Canvas
- Android花樣loading進度條(三)-配文字環形進度條Android
- Js 百分比進度條JS
- javascript實現的帶有百分比的進度條效果JavaScript
- 直播電商平臺開發,環形進度條元件元件
- 直播商城系統原始碼,環形進度條元件原始碼元件
- YCProgress自定義百分比進度條
- JavaScript百分比動態進度條JavaScript
- svg和css3建立環形漸變進度條SVGCSSS3
- Flutter 波浪圓形進度條Flutter
- 自定義圓形進度條
- SVG畫圓形進度條SVG
- jQuery 進度條效果程式碼jQuery
- CSS快遞進度條效果CSS
- canvas水位進度效果程式碼例項Canvas
- 前端學習筆記:使用canvas繪製有圓角的百分比進度條前端筆記Canvas
- CSS 線條環形動態運動效果CSS
- jQuery實進度條效果詳解jQuery
- 一對一聊天原始碼,vue實現環形進度條元件原始碼Vue元件
- canvas圓形時鐘效果Canvas
- 短視訊商城系統,Android進度條,自定義進度條,顯示百分比Android
- [-Flutter 自定義元件-] 圓形進度條Flutter元件
- Android自定義圓形進度條Android