你的位置:首页 > 软件开发 > 网页设计 > 动画

动画

发布时间:2017-08-25 11:00:18
利用webgl随机生成N个方块,并在画布内来回移动,遇到边界可以弹回。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画制作</title> <script type="text/javascript" src='/images/loading.gif' data-original="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>

动画

 

原标题:动画

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录