• 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

  • 相关阅读:
    定时器
    sortable.js 华丽丽的排序
    jqGrid一些操作
    session 共享
    数组排序 和 二分法查找
    关于map
    文件导入
    文件导出
    文件下载
    float 保留两位小数
  • 原文地址:https://www.cnblogs.com/tianma3798/p/13792614.html
Copyright © 2020-2023  润新知