本文为大家分享了canvas实现适用于移动端的百分比仪表盘，供大家参考，具体内容如下
由于最近工作中，经常会遇到一些动态百分比的仪表盘，一开始都是用图片样式方式实现；
但是随着越来越多的项目，决定用canvas绘制一个简易的仪表盘，便于以后项目中直接使用；
现版本只是书写为方法形式，也许之后会有时间对其优化为插件形式。
简简单单而已，以下直接给出代码和执行过程中的三张截图：
<script type="text/javascript" src="../js/flexible.js">
<script type="text/javascript">
var pper=0;
var pper_interal;
var dushu=document.getElementById('dushu');
var aaa=drawCanvanPercent('myCanvas1','rem',2,'#0e9cfa',0.2,'#fff');
function drawCanvanPercent(ele_id,dw,cir_r,cir_color,line_w,fill_color){
if(dw=="rem"){
cir_r=cir_r(window.screen.width/10);
line_w=line_w(window.screen.width/10);
}
var canvas = document.getElementById(ele_id);
var circle = {
r : cir_r/2,//圆的半径
per : canvas.getAttribute('data-percent'),//百分比分子
color : cir_color,//圆的颜色
lineWidth : line_w //圆的颜色
};
canvas.width=canvas.height=circle.r2;
canvas.style.borderRadius="50%";
if(canvas.getContext){
var ctx2 = canvas.getContext("2d");
ctx2.fillStyle = fill_color;
ctx2.arc(circle.r,circle.r,circle.r-circle.lineWidth/2,Math.PI2,false);
ctx2.fill();
var ctx = canvas.getContext("2d");
pper_interal= setInterval(function () {
drawMove(ctx,circle);
},10);
}
}
function drawMove(ctx,circle){
if(pper>=circle.per){
pper=circle.per;
clearTimeout(pper_interal);
}else{
pper++;
}
dushu.innerText=pper+'%';
ctx.beginPath();
ctx.strokeStyle = circle.color;
ctx.lineWidth=circle.lineWidth;
ctx.arc(circle.r,Math.PI(pper/100)360/180,false);
ctx.stroke();
}