js+HTML5 canvas 实现简单的加载条(进度条)功能示例

下面是详细讲解“js+HTML5 canvas 实现简单的加载条(进度条)功能示例”的完整攻略。

1. 准备工作

首先准备好需要的HTML文件和JS文件。其中HTML文件中包含一个画布(canvas)的标签，用于绘制进度条，具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas进度条示例</title>
    <style type="text/css">
        canvas{border:1px solid #ccc;}
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="30"></canvas>
    <script type="text/javascript" src="进度条.js"></script>
</body>
</html>

JS文件中需要定义绘制进度条的函数和调用该函数的代码。具体代码如下：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

// 定义进度条绘制函数
function drawProcessBar(p){

    // 设置进度条样式
    ctx.fillStyle = "#006699";
    ctx.fillRect(0,0,p,30);

    // 显示进度百分比
    ctx.fillStyle = "#000";
    ctx.font = "bold 14px Arial";
    ctx.fillText(p+"%",p+10,20);

}

// 调用绘制函数，模拟进度增长过程
var p=0;
var timer = setInterval(function(){
    p++;
    if(p>100){
        clearInterval(timer);
        alert("进度条加载完毕!");
    }else{
        ctx.clearRect(0,0,canvas.width,canvas.height);
        drawProcessBar(p*5);
    }
},50);

2. 示例说明

以上代码定义了一个绘制进度条的函数drawProcessBar，该函数需要传入一个参数p表示当前进度百分比。函数体中先设置进度条的样式（蓝色矩形），再显示进度百分比（黑色文字）。最后在JS中调用该函数，模拟进度增长的过程，当进度条加载完毕时，弹出提示框。

对于进度条的绘制，需要用到画布标签<canvas>和画布操作函数getContext('2d')。<canvas>的width和height属性可以设置画布的宽度和高度，getContext('2d')则可以返回一个CanvasRenderingContext2D对象用于绘制Canvas图形。

以上示例中，进度条的长度是根据当前进度百分比p计算得出，代码为：