正文  软件开发 > html5 >

动画,

动画,利用webgl随机生成N个方块,并在画布内来回移动,遇到边界可以弹回。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

动画,

利用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>

http://www.bkjia.com/HTML5/1223935.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1223935.htmlTechArticle动画, 利用webgl随机生成N个方块,并在画布内来回移动,遇到边界可以弹回。 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title动画制作/title...