动画

利用webgl随机生成N个方块，并在画布内来回移动，遇到边界可以弹回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画制作</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var canvas = $("#myCanvas");
            var context = canvas.get(0).getContext("2d");
            var canvasWidth = canvas.width();
            var canvasHeight = canvas.height();
            function rectBlack() {
                context.fillStyle = "rgb(0,0,0)";
                context.fillRect(0,0,canvasWidth,canvasHeight);
            }
            rectBlack();
            function rectRed(x,y,width,height) {
                context.fillStyle = "rgb(255,0,0)";
                context.fillRect(x,y,width,height);
            }
            var playAnimation = true;
            var startButton = $("#startAnimation");
            var stopButton = $("#stopAnimation");
            startButton.hide();

            startButton.click(function () {
                $(this).hide();
                stopButton.show();
                playAnimation = true;
                animate();
            });
            stopButton.click(function () {
                $(this).hide();
                startButton.show();
                playAnimation = false;
            });

            var Shape = function (x, y,width,height) {
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.reverseX = false;
                this.reverseY = false;
            }
            var shapes = new Array();
            for(var i = 0;i<10;i++){
                var x = Math.random()*1000;
                var y = Math.random()*800;
                var width = height = Math.random()*50;
                shapes.push( new Shape(x,y,width,height));
            }

            function animate() {
                if(playAnimation){
                    setTimeout(animate,100);
                }
                rectBlack();
                var shapesLength = shapes.length;
                for (var i=0;i<shapesLength;i++){
                    var tmpShape  = shapes[i];                  
　　　　　　　　　　　 rectRed(tmpShape.x,tmpShape.y,tmpShape.width,tmpShape.height);
                    if(!tmpShape.reverseX){
                        tmpShape.x=tmpShape.x+Math.random()*10;
                    }else{
                        tmpShape.x=tmpShape.x-Math.random()*10;
                    }

                    if(!tmpShape.reverseY){
                        tmpShape.y=tmpShape.y+Math.random()*10;
                    }else{
                        tmpShape.y=tmpShape.y-Math.random()*10;
                    }

                    if(tmpShape.x<0){
                        tmpShape.reverseX = false;
                    }else if(tmpShape.x+tmpShape.width>canvasWidth){
                        tmpShape.reverseX = true;
                    };
                    if(tmpShape.y<0){
                        tmpShape.reverseY = false;
                    }else if(tmpShape.y+tmpShape.height>canvasHeight){
                        tmpShape.reverseY = true;
                    };
                }
            }
            animate();
        });
    </script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="800">
</canvas>
<div>
    <button id="startAnimation">开始</button>
    <button id="stopAnimation">暂停</button>
</div>

</body>
</html>

 

posted @ 2017-08-25 10:24  scqilin  阅读(230)  评论(0)  编辑  收藏  举报