canvas绘制简易百分比仪表盘dashboard

来源：互联网发布：宜信好望角知乎编辑：程序博客网时间：2024/04/29 21:36

由于最近工作中，经常会遇到一些动态百分比的仪表盘，一开始都是用图片样式方式实现；
但是随着越来越多的项目，决定用canvas绘制一个简易的仪表盘，便于以后项目中直接使用；
现版本只是书写为方法形式，也许之后会有时间对其优化为插件形式。

简简单单而已，以下直接给出代码和执行过程中的三张截图：

<!doctype html><html lang="en"><head>    <meta charset="utf-8">    <meta http-equiv="Pragma" content="no-cache">    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>    <meta name="format-detection" content="telephone=no"/>    <meta name="apple-mobile-web-app-capable" content="yes"/>    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>    <title>canvas绘制简易百分比仪表盘dashboard（建议最好用于移动端）</title>    <style type="text/css">        div{margin:1rem;background:#eee;padding:.3rem; position:relative }        div canvas{background:#cacaca;            -webkit-transform: rotateZ(-270deg);            transform:rotateZ(-270deg);            -webkit-animation:ani01 1s ease 0s both;            animation:ani01 1s ease 0s both;        }        @-webkit-keyframes ani01 {            0%{                -webkit-transform:scale(.5,.5) rotateZ(-270deg);                transform:scale(.5,.5) rotateZ(-270deg);            }            100%{                -webkit-transform:scale(1,1) rotateZ(-90deg);                transform:scale(1,1) rotateZ(-90deg);            }        }        @keyframes ani01 {            0%{                -webkit-transform:scale(.5,.5) rotateZ(-270deg);                transform:scale(.5,.5) rotateZ(-270deg);            }            100%{                -webkit-transform:scale(1,1) rotateZ(-90deg);                transform:scale(1,1) rotateZ(-90deg);            }        }    </style></head><body><div>    <canvas id="myCanvas1" data-percent="80">        您的浏览器不支持canvas标签。    </canvas>    <span style="display:block;position:absolute;top:.94rem;left:.3rem;width:2rem;text-align:center;font-size:.5rem;font-family:microsoft Yahei" id="dushu" >0</span></div><script type="text/javascript" src="../js/flexible.js"></script><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.r*2;        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, 0, Math.PI*2, 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, circle.r, circle.r, 0, Math.PI*(pper/100)*360/180, false);        ctx.stroke();    }    </script></body></html>

截图如下：

建议：不要因为简单而不去动手，多动手多思考，你会进步的。

0 0