zoukankan      html  css  js  c++  java
  • canvas实现进度条!

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            body{padding:0px;margin:0px;overflow: hidden;}
            #cas{display: block;border:1px solid;margin:auto;}
        </style>
        <title>progressBar</title>
    </head>
    <body>
    <div class="game">
        <canvas id='cas' width="700" height="750" >您的浏览器不支持canvas,请更新浏览器</canvas>
    </div>
    <script>
        var canvas = document.getElementById("cas");
        var ctx = canvas.getContext("2d");
        var progress = 0;
        var flag = true;
        var booms = [];
    
        Array.prototype.foreach = function(callback){
            for(var i=0;i<this.length;i++){
                if(this[i]!==null) callback.apply(this[i] , [i])
            }
        }
    
        window.RAF = (function(){
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
        })();
    
        function getRandom(a , b){
            return Math.random()*(b-a)+a;
        }
    
        var Frag = function(centerX , centerY , radius , color ,tx , ty){   //烟火碎屑对象
            this.tx = tx;
            this.ty = ty;
            this.x = centerX;
            this.y = centerY;
            this.dead = false;
            this.centerX = centerX;
            this.centerY = centerY;
            this.radius = radius;
            this.color = color;
        }
    
        Frag.prototype = {
            paint:function(){
                ctx.save();
                ctx.beginPath();
                ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
                ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
                ctx.fill()
                ctx.restore();
            },
            moveTo:function(index){
                this.ty = this.ty+30;
                var dx = this.tx - this.x , dy = this.ty - this.y;
                this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);
                this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);
                if(dx===0 && Math.abs(dy)<=80){
                    this.dead = true;
                }
                this.paint();
            }
        }
    
        var stage = {
    
            update:function(){
    
                    if(progress<=600){
                        ctx.save();
                        ctx.fillStyle = "rgba(0,5,24,0.1)";
                        ctx.fillRect(0,0,canvas.width,canvas.height);
                        ctx.restore();
                        ctx.save();
                        ctx.fillStyle="blue";
                        ctx.fillRect(50,300,600,50);
                        ctx.restore();
    
                        ctx.save();
                        var gradient=ctx.createLinearGradient(50,300,600,50);
                        gradient.addColorStop("0","grey");
                        gradient.addColorStop("0.5","black");
                        gradient.addColorStop("1.0","red");
                        ctx.fillStyle=gradient;
                        ctx.fillRect(50,300,progress,50);
                        progress += 2;
                        var  percentage= parseInt(progress/600*100)+"%";
                        ctx.font="30px Verdana";
                        ctx.fillText(percentage,200,200);
                        ctx.restore();
    
                        booms = [];
                        for(var i = 0;i<5;i++){
                            var  color = {
                                a:parseInt(getRandom(128,255)),
                                b:parseInt(getRandom(128,255)),
                                c:parseInt(getRandom(128,255))
                                            }    //end color
                            var fanwei = parseInt(getRandom(300, 400));
                            var a = getRandom(-Math.PI, -Math.PI*3/4);
                            var x = getRandom(0, fanwei) * Math.cos(a) + progress+50;
                            var y = getRandom(0, fanwei) * Math.sin(a) + 300;
    
                            var frag = new Frag( progress+50 , 300 , 2 , color , x , y );
                           booms.push(frag);
                        }//end for
    
                        booms.foreach(function(){
                            this.moveTo();
                        })
                    }else{
                        flag =false;
                    }
    
            },
    
            loop:function(){
                var _this = this;
                if(flag){
                this.update();
                }
                RAF(function(){
                    _this.loop();
                });
            },
    
            start:function(){
                this.loop();
            }
        }
        stage.start();
    </script>
    </body>
    </html>
  • 相关阅读:
    .NET Interop 工具集
    关于正弦波的算法
    Windows Phone 系列 本地数据存储
    Xaml cannot create an instance of “X”
    Windows Phone 系列 使用 MVVM绑定时无法获取当前值
    Windows Phone 系列 应用程序图标无法显示
    Windows Phone 系列 WPConnect无法上网的问题
    Windows Phone 系列 使用 Windows Phone 保存铃声任务
    WP7.5提交应用
    Windows Phone 系列 动态删除ObservableCollection
  • 原文地址:https://www.cnblogs.com/wangjingyao/p/4268032.html
Copyright © 2011-2022 走看看