canvas百分比加载动画

最新推荐文章于 2024-05-30 01:51:11 发布

转载最新推荐文章于 2024-05-30 01:51:11 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/NB-JDzhou/p/10314640.html

本文介绍了一种使用HTML5 Canvas实现的动态百分比加载动画，通过JavaScript控制绘制蓝色和白色圆圈，同时显示当前加载进度的百分比数字。动画通过不断更新绘制的圆弧角度来模拟加载过程，实现了流畅的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/NB-JDzhou/p/10314640.html