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;
            }
        }());
    }

  • 相关阅读:
    jquerymobile 页面间URL传值
    xcode 静态链接库的问题
    iPad 用户体验关键要素
    Enable SharePoint Designer for Project Web App PWA 2010
    后台定位
    做一个iPhone应用需要花多少钱?
    ios无法获取坐标
    重装系统后ORACLE数据库恢复的方法
    【Web】百度有聊官网的一些布局不好之处
    【Pagoda】在pagodabox里建立项目并连接数据库
  • 原文地址:https://www.cnblogs.com/NB-JDzhou/p/10314640.html
Copyright © 2011-2022 走看看