master

分支 (1)

管理

管理

master

canvas_tab
/
10运动的饼形图.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width='600' height='400'></canvas>
<script>
    var can = document.querySelector('canvas');
    var cax = can.getContext('2d');

    //设置初始值
    var start = -Math.PI/2;
    var delat = 0.01;
    var current = start;
    var end = 3*Math.PI/2;

    //设置一个定时器
    var interval = setInterval(function(){
        //清除画布
//        cax.clearRect(0,0,600,400);
        //停止定时器的条件
        if(current>=end-delat&&current<=end+delat){
            clearInterval(interval);
            current = end;
            console.log('绘制完成')
        }else{
            current += delat;
        }
        //开始绘制
        cax.beginPath();
        if(current>Math.PI){
            cax.fillStyle = 'red';
        }else{
            if(current>Math.PI/2){
                cax.fillStyle = 'blue';
            }else{
                if(current>0){
                    cax.fillStyle = 'green';
                }else{
                    cax.fillStyle = 'yellow';
                }
            }
        }
        cax.moveTo(300,200);
        cax.arc(300,200,100,current-delat,current);
        cax.fill();

    },17)


    65121069
</script>
</body>
</html>