zoukankan      html  css  js  c++  java
  • canvas百分比加载动画

    window.onload = function(){
        var canvas = document.getElementById('canvas'),  //获取canvas元素
            context = canvas.getContext('2d'),  //获取画图环境,指明为2d
            centerX = canvas.width/2,   //Canvas中心点x轴坐标
            centerY = canvas.height/2,  //Canvas中心点y轴坐标
            rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
            speed = 1; //加载的快慢就靠它了
        //绘制蓝色外圈
        function blueCircle(n){
            context.save();
            context.strokeStyle = "#d0b171"; //设置描边样式
            context.lineWidth = 20; //设置线宽
            context.beginPath(); //路径开始
            context.arc(centerX, centerY, 90 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
            context.stroke(); //绘制
            context.closePath(); //路径结束
            context.restore();
        }
        //绘制白色外圈
        function whiteCircle(){
            context.save();
            context.beginPath();
            context.strokeStyle = "white";
            context.arc(centerX, centerY, 100 ,0, Math.PI*2, false);
            context.stroke();
            context.closePath();
            context.restore();
        }
        //百分比文字绘制
        function text(n){
            context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            // context.strokeStyle = "#d0b171"; //设置描边样式
            context.fillStyle = '#d0b171';
            context.font = "bold 30vw '微软雅黑'"; //设置字体大小和字体
            // context.paint.setStyle(Style.FILL);
            //绘制字体,并且指定位置
            // context.strokeText(n.toFixed(0)+"", centerX-50, centerY+20);
            context.fillText(n.toFixed(0)+"",centerX-50,centerY+20,100);
            context.stroke(); //执行绘制
            context.restore();
        }
        //动画循环
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
            whiteCircle();
            text(speed);
            blueCircle(speed);
            if(speed >= 100){
                speed = 100;
                // canvas.remove();
            }else{
                speed += 1;
            }
        }());
    }

  • 相关阅读:
    课题论文之调研--贝叶斯网络
    Android开发--数据存储之数据库操作
    Android开发--数据存储之File文件存储
    ROS常用命令
    CMakeLists.txt实例运用(入门)
    乐视三合一奥比中光Orbbec Astra Pro在ROS中配置显示RGB、深度、IR图像的两种思路
    VTK显示CT图像视图
    手眼标定
    并联机器人位姿解算
    信息物理融合CPS
  • 原文地址:https://www.cnblogs.com/NB-JDzhou/p/10314640.html
Copyright © 2011-2022 走看看