当前位置:首页 > canvas绘制饼图例子

canvas绘制饼图例子

发布于 2018-07-16 阅读 138 次 Canvas Javascript

介绍:

canvas绘制饼图例子

预览

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html,body{padding:0;margin:0;}
    .mydraw{display:block;position:relative;margin:0 auto;padding:0;}
    </style>
</head>
<body>
    <canvas class="mydraw" id="mycanvas">您的浏览器不支持canvas</canvas>
</body>
<script>
    var canvas=document.getElementById("mycanvas"),
        ctx = canvas.getContext( '2d' ),
        w = window.innerWidth,
        h = window.innerHeight;
    canvas.width = w,
    canvas.height = h;
    //圆心坐标
    var cx = w/2,
        cy = h/2,
        r = cx/2;
    var num = [0.1, 0.2, 0.1, 0.2, 0.15, 0.05, 0.2],
        n = num.length,
        angle;
    // 绘制扇形
    function draw(i){
        ctx.save();
        ctx.beginPath();
        ctx.translate(cx,cy)
        if(i>0){
            angle = getAngle(num, i);
            ctx.rotate(2*Math.PI*angle);
        }
        ctx.moveTo(0, 0);
        // ctx.lineTo(0+r, 0); //不画线也可以
        ctx.arc(0, 0, r, 0, 2*Math.PI*num[i]);
        // ctx.lineTo(0,0); //不画线也可以
        ctx.stroke();
        ctx.fillStyle = getRandColor();
        ctx.fill();
        ctx.restore();
    }
    // 给扇形添加点击事件
    canvas.onclick = function(){

    }

    function getAngle(arr, cur){
        var res = 0;
        for(var i=0; i<cur; i++){
            res += arr[i];
        }
        return res;
    }
    function getRandColor(){
        var r = getRandom(0, 255),
            g = getRandom(0, 255),
            b = getRandom(0, 255);
        var rgb = "rgb("+r+","+g+","+b+")";
        return rgb;

    }
    function getRandom(min, max){
        return Math.floor((max-min)*Math.random() + min);
    }
    
    function loop(){
        if(n > -1){
            draw(n);
            setTimeout(loop, 50);
        }
        n--;
    }
    // 饼图
    loop();

    // 风车
    function drawLeave () {
        var lnum = 12;
        angle = 2*Math.PI/lnum;
        for(var i=0; i<lnum; i+=1){
            ctx.save();
            ctx.beginPath();
            ctx.translate(cx,cy);
            ctx.rotate(angle*i);
            ctx.moveTo(0, 0);
            ctx.lineTo(0+r, 0);
            ctx.arc(0, 0, r, 0, angle);
            ctx.lineTo(0, 0);
            ctx.fillStyle = getRandColor();
            ctx.fill();
            ctx.restore();
        }
        // 绘制中心圆
        ctx.save();
        ctx.beginPath();
        ctx.translate(cx,cy);
        ctx.arc(0, 0, r/8, 0, 2*Math.PI);
        ctx.fillStyle = getRandColor();
        ctx.fill();
        ctx.restore();
    }
    // function loop(){
    //     window.requestAnimationFrame(loop);
    //     if(r > 10){
    //         r/=2;
    //     }else{
    //         r = cx/2
    //     }
    //     drawLeave();
    // }
    // loop()
    // 绘制加载圈圈
    var start = 0;
    var qmun = 100;
    function drawLoad () {
        angle = 2*Math.PI/qmun;
        for(var i=0; i<qmun; i+=2){
            ctx.save();
            ctx.beginPath();
            ctx.translate(cx,cy);
            ctx.rotate(angle*(i+start));
            ctx.moveTo(0, 0);
            ctx.lineTo(0+r, 0);
            ctx.arc(0, 0, r, 0, angle);
            ctx.lineTo(0, 0);
            // ctx.fillStyle = "rgb("+i*2+","+i*2+","+i*2+")";
            ctx.fillStyle = "rgba(0, 0 ,0, "+1/qmun*2*i+")";
            ctx.fill();
            ctx.restore();
        }
        // 绘制中心圆
        ctx.save();
        ctx.globalCompositeOperation = "destination-out";
        ctx.beginPath();
        ctx.translate(cx,cy);
        ctx.arc(0, 0, r-10, 0, 2*Math.PI);
        ctx.fillStyle = "#f00";
        ctx.fill();
        ctx.restore();

        //绘制中间数字
        var fontSize = r/3+"px";
        ctx.font = fontSize+" Georgia";
        ctx.textAlign = "center";
        ctx.textBaseline="middle";
        ctx.fillText(percent, cx, cy);
    }

    // function loop(){
    //     ctx.clearRect(0, 0, w, h);
    //     drawLoad();
    //     window.requestAnimationFrame(loop);
    //     // setTimeout(loop, 50)
    //     if(start < qmun){
    //         start += 2;
    //     } else {
    //         start = 0;
    //     }
    // }
    // r = r/4;
    // var percent = "87%";
    // loop();
    // drawLoad()
    // 倒计时    
</script>
</html>