當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS canvas绘制进度条
生活随笔
收集整理的這篇文章主要介紹了
JS canvas绘制进度条
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JS canvas繪制進度條
在前端開發(fā)中，我比較喜歡Cavans畫布，通過Cavans可以繪制自己想要的東西，在早之前，我通過Canvas播放視頻，繪制圖片，繪制banner圖等，復雜點可以用來做數(shù)據(jù)的防盜竊等，譬如文章預覽等，今天分析兩個簡單的實例，繪制圓形進度條和條形進度條
（一）繪制圓形進度條
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } </style> </head> <body><div style="text-align: center;padding-top: 15px"><canvas id="canvas"></canvas></div> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 650; canvas.height = 650;var progress = 0; var time = window.setInterval(function(){progressRound(progress);progress ++;if(progress > 100){progress = 0;window.clearInterval(time);} }, 15); //圓形進度條 function progressRound(num){var progress = 0.02 * num - 0.5;var width = canvas.width;var height = canvas.height;context.lineWidth = 20; //進度條寬度context.clearRect(0, 0, width, height);context.lineCap = "round"; //線兩端為圓角//繪制地圈context.beginPath();context.strokeStyle = "#E4E2E2";context.arc(width / 2, height / 2, (width / 2) - 10, 0, 2*Math.PI);context.stroke();//繪制頂層圈context.beginPath();context.strokeStyle ="#3B84F9";context.arc(width / 2, height / 2, (width / 2) - 10, -0.5*Math.PI, progress*Math.PI); //-0.5~1.5context.stroke();//進度context.beginPath();context.textAlign = "center";context.font = "20px Arial";context.fillStyle = "#3B7DF9";context.fillText(num.toFixed(1)+"%", width / 2, height / 2);context.stroke();//文字提示context.beginPath();context.textAlign = "center";context.fillStyle = "#3B7DF9";context.font = "20px Arial";context.fillText("完成進度", width / 2, (height / 2) + 24);context.stroke(); } </script> </html>（二）繪制條形進度條
總結(jié)
以上是生活随笔為你收集整理的JS canvas绘制进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Winamp 插件技术
- 下一篇： Spring Data JPA 数据加密