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计算得出，代码为：

ctx.fillRect(0,0,p,30);

其中fillRect(x,y,width,height)函数用于定义矩形的位置和尺寸，其中(x,y)表示左上角坐标，(width,height)表示矩形的宽度和高度。

另外，在代码中有一个定时器setInterval用于模拟进度条的增长过程。在定时器内部，每隔一段时间执行一次函数，更新进度条的状态。当进度条增长到100%时，该定时器会被清除clearInterval(timer)，同时出现弹框提示"进度条加载完毕!"。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js+HTML5 canvas 实现简单的加载条(进度条)功能示例 - Python技术站

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

1. 准备工作

2. 示例说明

相关文章