zoukankan      html  css  js  c++  java
  • canvas扇形进度圈动态加载

    效果图如下:动态加载的

     实现代码如下:

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .midLeft {
    250px;
    height: 250px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #000;
    }
    #canvas{
    position: absolute;
    left: -25px;
    top: -24px;
    }
    </style>
    </head>

    <body>
    <div class="midLeft">
    <div class="left">
    <canvas width="252" height="252" id="process"></canvas>
    <canvas width="300" height="300" id="canvas"></canvas>
    </div>
    </div>
    <script type="text/javascript">
    // 技能
    var c = document.getElementById("process");
    var ctx = c.getContext('2d'),
    centerX = c.width / 2, //Canvas中心点x轴坐标
    centerY = c.height / 2, //Canvas中心点y轴坐标
    rad = Math.PI * 2 / 100, //将360度分成100份,那么每一份就是rad度
    speed = 0.1; //加载的快慢就靠它了
    // 加载快慢
    animate();

    function animate() {
    window.requestAnimationFrame(function () {
    if (speed < 82) {
    animate();
    }
    });
    ctx.clearRect(0, 0, c.width, c.height);
    speed += 0.4;
    drawCircle(ctx, speed);
    };

    function drawCircle(ctx, percent) {
    //画进度环
    ctx.save();
    ctx.strokeStyle = "#1e8c5c";
    ctx.lineWidth = 16;
    ctx.beginPath();
    ctx.arc(centerX, centerY, 100, 149.8, -Math.PI / 2 + percent * rad + 120, false);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

    //百分比文字绘制
    ctx.save();
    ctx.fillStyle = "#fff";
    ctx.font = "bold 21px Arial";

    //绘制字体并指定位置
    ctx.fillText('成功率', centerX - 25, centerY);
    ctx.fillText(percent.toFixed(0) + '%', centerX - 15, centerY + 20);
    ctx.restore();
    }
    // 内部进度条
    var cont = document.getElementById('canvas');
    var context = cont.getContext('2d');

    var center_X = cont.width / 2; //Canvas中心点x轴坐标
    var center_Y = cont.height / 2; //Canvas中心点y轴坐标

    animate_c();

    function animate_c() {
    window.requestAnimationFrame(function () {
    if (speed < 82) {
    animate_c();
    }
    });
    context.clearRect(0, 0, cont.width, cont.height);
    speed += 0.4;
    drawCircle_c(context, speed);
    };

    function drawCircle_c(ctx, percent) {
    //画进度环
    ctx.save();
    ctx.strokeStyle = "#4e5866";
    ctx.lineWidth = 12;
    ctx.beginPath();
    ctx.arc(center_X, center_Y, 80, 119.9, -Math.PI / 2 + 90.1 + percent * rad, false);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
    for (var i = 0; i < 12; i++) {
    //保存当前状态
    ctx.save();
    //刻度粗细
    ctx.lineWidth = 7;
    //刻度颜色
    ctx.strokeStyle = "#000"
    //设置00点,以画布中心为00
    ctx.translate(center_X, center_Y);
    //设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180
    ctx.rotate(i * 30 * Math.PI / 180);
    ctx.beginPath();
    //刻度起始点
    ctx.moveTo(0, -74);
    //刻度结束点
    ctx.lineTo(0, -108);
    ctx.closePath();
    ctx.stroke();
    //将旋转后的图片返回原画布
    ctx.restore();
    }
    }
    </script>
    <script src="./js/jquery/jquery.min.js"></script>
    </body>

    </html>
  • 相关阅读:
    ES6 Symbol类型 附带:Proxy和Set
    why updating the Real DOM is slow, what is Virtaul DOM, and how updating Virtual DOM increase the performance?
    React高级指南
    池(Pool)
    计算机网络Intro
    React基础
    CommonJS 与 ES6 的依赖操作方法(require、import)
    webpack初识(biaoyansu)
    关于时间安排贪心算法正确性的证明
    DP总结
  • 原文地址:https://www.cnblogs.com/surui/p/7464337.html
Copyright © 2011-2022 走看看