canvas快速入门5：canvas画进度条

canvas画进度条

这一章画概述中出现的圆形进度条,再加一个水平进度条。

1.水平进度条

分析一下，水平进度条就像画一个矩形，矩形慢慢的变长，同时数字在不停的变大知道100%。再简单一点就像画一条比较粗的直线，从0开始不停下画到100时结束。
分析结果：

• 先画一条宽度12px的灰色线，长度自己定。
• 在画一条同样宽度同样长度且同样位置的绿色线，且使用setTimeout让绿色线段慢慢增长。
• 再画绿色线段的同时，在灰色线段末尾处绘制变化的数值。

<canvas id="canvas8" height="600" width="600" style="border:1px solid #ccc;"></canvas>
<script>
    const canvas = document.getElementById('canvas8');
    if(canvas.getContext){
        const van = canvas.getContext('2d');
        let progress = 0;
        drawProgress();
        
        function drawProgress() {
            // 清空画布(每次清空画布重新绘制，才能更新)
            van.clearRect(0,0,canvas.width,canvas.height);
            // 首先绘制背景
            drawBg();
            // 开始绘制绿色线段
            van.beginPath();
            van.lineWidth = 12;// 设置线宽
            van.strokeStyle = 'green';// 画笔颜色
            van.lineTo(300,300);
            van.lineTo(300+progress,300);
            van.stroke();
            van.closePath();
            // 开始绘制变动的数字
            van.beginPath();
            van.lineWidth = 1;
            van.fillStyle = '#4a4a4a';
            van.font = '14px serif';
            van.fillText(parseInt(progress/2)+'%',504,305);
            van.fill();
            van.closePath();
            progress++;
            if(progress <= 200){
                // 通过setTimeout进行递归调用更新
                setTimeout(()=>{
                    drawProgress();
                },20)
            }
        }

        /**
         * 绘制背景灰色线段
         */
        function drawBg(){
            van.beginPath();
            van.lineWidth = 12;
            van.strokeStyle = '#ccc';
            van.lineTo(300,300);
            van.lineTo(500,300);
            van.stroke();
            van.closePath(); 
        }

    }else{
        alert('不支持');
    }
</script>

2.环形进度条

同理，环形我们用画圆的方式来实现。我们画弧的时候每次比上一次多画一度，从0画到360度结束。同样也要先画一个同圆心，同半径的灰色圆。

<canvas id="canvas" width="800" height="800" style="border:1px solid #ccc"></canvas>

<script>
    const can = document.getElementById('canvas');
    const van = can.getContext('2d');

    let currentDeg = 0;// 度从0开始
    // 先绘制背景，这里只绘制一次，跟水平进度条不一样呢
    drawCircle();
    drawArc(currentDeg++);

    function drawArc(deg) {
        // 计算deg次时的开始角度
        let from = (Math.PI/180)*deg;
        // 计算deg次时的结束角度
        let to = (Math.PI/180)*deg + Math.PI/180;
        van.beginPath();
        van.lineWidth = 6;
        // 设置线头的样式为圆头，默认是方形(不圆润)
        van.lineCap = 'round';
        van.strokeStyle = 'green';
        van.arc(200,200,80,from,to,false);
        // 清空画布上的文字，这里不是清除整个画布哦
        van.clearRect(180,180,50,50);
        van.font = '18px serif';
        let text = (currentDeg / 360 * 100).toFixed(0) + '%';
        van.fillText(text,190,200);
        van.stroke();
        van.closePath()
        if(currentDeg <= 360){
            setTimeout(function () {
                drawArc(currentDeg++);
            },10)
        }
    }

    function drawCircle() {
        van.beginPath();
        van.lineWidth = 6;
        van.strokeStyle = '#ccc';
        van.arc(200,200,80,0,Math.PI*2,false);
        van.stroke();
        van.closePath()
    }

</script>

小结

仔细分析，用最简单的方式实现想要的效果。其实现在已经可以尝试写直方图了(是真的呢)！