Canvas 实现圆圈进度展示/进度动画

一、基础使用canvas的画圆和画弧度api

<canvas id="cavasOne" width="300" height="300" style="border: 1px solid red;"></canvas>

<script>
    var cavans = document.querySelector('#cavasOne');
    var ctx = cavans.getContext('2d');
    //绘制圆
    ctx.beginPath();
    ctx.lineTo(150, 150);
    ctx.arc(150, 150, 100, 0, Math.PI * 2);
    ctx.fillStyle = '#ddd';
    ctx.fill();
    ctx.closePath();

    //绘制扇形 指定百分比 25%
    ctx.beginPath();
    ctx.lineTo(150, 150);
    ctx.arc(150, 150, 100, -90 * Math.PI / 180, 0);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
</script>

 

二、使用动画执行绘画操作

<canvas id="cavasOne" width="300" height="300" style="border: 1px solid red;"></canvas>

<script>
    var cavans = document.querySelector('#cavasOne');
    var ctx = cavans.getContext('2d');

    function drawAngle(angle) {
        ctx.clearRect(0, 0, cavans.width, -cavans.height);
        //绘制圆
        ctx.beginPath();
        ctx.lineTo(150, 150);
        ctx.arc(150, 150, 100, 0, Math.PI * 2);
        ctx.fillStyle = '#ddd';
        ctx.fill();
        ctx.closePath();

        //绘制扇形 指定百分比 25%
        ctx.beginPath();
        ctx.lineTo(150, 150);
        ctx.arc(150, 150, 100, -90 * Math.PI / 180, (angle - 90) * Math.PI / 180);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.closePath();

        //清空中心
        ctx.beginPath();
        ctx.lineTo(150, 150);
        ctx.arc(150, 150, 90, 0, Math.PI * 2);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.closePath();
    }

    //动画执行处理
    var num = 0;
    var angle = 135;
    function step() {
        num++;
        drawAngle(num);
        if (num < angle)
            window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
</script>

 

更多：

canvas应用——将方形图片处理为圆形

Canvas保存图片保存到本地

Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js