canvas 制作进度条反向进度条旋转画图角度

最新推荐文章于 2023-01-27 21:02:20 发布

七色花的姐姐

最新推荐文章于 2023-01-27 21:02:20 发布

阅读量415

点赞数

分类专栏： web前端文章标签： canvas rotate

本文链接：https://blog.csdn.net/u012155729/article/details/105266354

版权

web前端专栏收录该内容

14 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>www.jb51.net canvas实现加载条动画</title>
</head>

<body>
    <canvas id="loadingProgressCanvas"></canvas>
    <canvas id="loadingProgressCanvas2"></canvas>
    <script>
    /*
     * 获取canvas, canvas本身没有画图能力，相当于一个画布，提供绘制图形的地方
     * document.getElementsByTagName("canvas")[0]
     * document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas")
     * document.querySelectorAll("canvas")[0]
     */
    var loadingProgressCanvas = document.getElementById("loadingProgressCanvas");
    var ctx = loadingProgressCanvas.getContext("2d"); // 获取绘制图形的对象(画笔)
    var loadingProgressCanvas2 = document.getElementById("loadingProgressCanvas2");
    var ctx2 = loadingProgressCanvas2.getContext("2d");

    drawFirst(); // 绘制初始状态
    var progress = 0; // 定义进度
    drawProgress(); // 绘制初始进度
    // 定义定时器, 100ms钟绘制5%

    var timer = setInterval("drawProgress()", 100);
    // 绘制初始状态
    function drawFirst() {
        /*
         * 定义矩形(左上角x/y左边,宽高)
         */         
         // 清空画布(每次清空画布重新绘制，才能更新)
        //  ctx.rotate(-10*Math.PI/180); //旋转角度              
        ctx.rect(0, 90, 200, 15);
        ctx.stroke(); // 绘制定义好的矩形路径
        ctx.fillStyle = "green"; // 定义画笔颜色, 重新绘制已经加载的进度条

        // ctx2.rotate(-10*Math.PI/180);
        ctx2.rect(10, 90, 200, 15);
        ctx2.stroke(); // 绘制定义好的矩形路径
        ctx2.fillStyle = "green";
    }
    // 绘制进度条
    function drawProgress() {
        if (progress == 200) {
            progress = 0;
            ctx.clearRect(0, 90, 200, 15); // 清楚之前的绘制
            ctx2.clearRect(10, 90, 200, 15); // 清楚之前的绘制

        } else {  
            ctx.moveTo(progress, 90); // 移动到上一次绘制的终点,准备绘制下一次的进度
            ctx.fillRect(progress, 90, 10, 15); // 200 * 0.05
            ctx2.moveTo(200 - progress, 90); // 移动到上一次绘制的终点,准备绘制下一次的进度
            ctx2.fillRect(200 - progress, 90, 10, 15); // 200 * 0.05
           
            progress += 10;return
        }
    }
    </script>
</body>

</html>

七色花的姐姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 制作进度条反向进度条旋转画图角度

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title></head><body> <canvas id="...
复制链接

扫一扫