一个显示数据用的canvas

最新推荐文章于 2024-04-15 10:30:41 发布

丁小柒

最新推荐文章于 2024-04-15 10:30:41 发布

阅读量994

点赞数

分类专栏： canvas开发专题文章标签： canvas

本文链接：https://blog.csdn.net/qq_33548381/article/details/76084841

版权

canvas开发专题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

好久没有写代码了，写点东西看看有没有忘了傻
html

<script>
var e=new echart([300,300],{'text':'hell','lineWidth':150,'bgcolor':'#ccc','color':'blue','bili':50});

</script>

function echart(list,json){     //[ width,height],{text,bgcoclor,color}
    var ctx=this.init(list,json);
}
echart.prototype.init=function(list,json){
    var that=this;
    var can=document.createElement('canvas');
    can.width=list[0];
    can.height=list[1];
    var canvas=document.body.appendChild(can);
    var r=change(list[0],list[1])
    var ctx=canvas.getContext('2d');
    var bili=json.bili;
    var b=0;
    var a=2;
    this.drawArc(ctx,list,r,json,0);
    setInterval(function(){
        ctx.clearRect(0,0,list[0],list[1]);
        that.drawArc(ctx,list,r,json,b);
        b=b+a;
        if(b==bili){
            a=0;
        }
    },100);

}
echart.prototype.drawArc=function(ctx,list,r,json,bili){
    var x=list[0]/2;
    var y=list[1]/2;
    var radiu=r*0.4;
    ctx.lineWidth=json.lineWidth;
    ctx.beginPath();
    ctx.strokeStyle=json.bgcolor;
    ctx.arc(x,y,radiu,0,2*Math.PI);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.strokeStyle=json.color;
    ctx.arc(x,y,radiu,-90 * Math.PI/180,(bili*3.6-90)* Math.PI/180);
    ctx.stroke();
    ctx.closePath();
}

function change(one,two){
    if(one>=two){
        return two;
    }else{
        return one;
    }
}