canvas绘制动态进度条

image.png
<body>
    <canvas id="mycanvas" width="400" height="400" style="background-color:rgb(214, 214, 214)"></canvas>
    <script>
        var canvas = document.getElementById('mycanvas');
        var width = canvas.width, height = canvas.height;
        var ctx = canvas.getContext('2d');

        function Drawrect(x, y, w, h) {
            this.x = x;
            this.y = y;
            this.w = 10;
            this.wconst = w;
            this.h = h;
            this.flag = true;

            this.run = function () {
                if (this.flag) {
                    this.w++;
                    if (this.w >= this.wconst) {
                        this.flag = false;
                    }
                    ctx.fillStyle = "#F00";
                    ctx.fillRect(this.x, this.y, this.w, this.h);
                }
                if (!this.flag) {
                    this.w--;
                    if (this.w <= 1) {
                        this.flag = true;
                    }
                    ctx.clearRect(this.x, this.y, this.wconst, this.h);
                    ctx.fillStyle = "#F00";
                    ctx.fillRect(this.x, this.y, this.w, this.h);
                }
            }
        }

        var d = new Drawrect(10, 10, 100, 10);
        var d2 = new Drawrect(10, 30, 150, 10); 
        var d3 = new Drawrect(10, 50, 200, 10);  
        var d4 = new Drawrect(10, 70, 250, 10);  
        var d5 = new Drawrect(10, 90, 300, 10);         
        run();
        function run() {
            //var t = setTimeout(run, 1);
            requestAnimationFrame(run);
            d.run();
            d2.run();
            d3.run();
            d4.run();
            d5.run();
        }
    </script>
</body>
canvas绘制动态进度条

猜你喜欢
