制作一个简单的canvas动画_H5之家 - 中国HTML5教程资源分享第一站

制作一个简单的canvas动画作者：旺仔一上来先话不多说上代码，代码能看的懂得，ok，就当我下面所有的内容为废话，代码看的不太懂的，没关系我会一点一点让你懂，不过前提是你有一定的html+css+js知识，没有这方面的知识又想学前端的话，私我，我有很多教程。如果大神们看到我的文档里有什么错误的地方还请在评论区指点一二，ok，转入正题，（流水账记录开始，大家都是理科生，文笔很烂，请见谅）：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><button style="float: left;">开始</button><button id="stop" style="float: left;">停止</button><canvas>您的浏览器不支持canvas画布</canvas></body><script>var canvas=document.getElementById('canvas');var context=canvas.getContext('2d');canvas.width=500;canvas.height=500;var startAimate=true;var shape=function(x,y){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()*250;var y=Math.random()*250;var width=height=Math.random()*50;shapes.push(new shape(x,y,width,height));};function animateCanvas(){context.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<shapes.length;i++){var tmpShape=shapes[i];tmpShape.x+=Math.random()*4-2; tmpShape.y+=Math.random()*4-2;context.fillRect(tmpShape.x,tmpShape.y,tmpShape.width,tmpShape.height); if(tmpShape.x<0){ tmpShape.reverseX=false; }else if(tmpShape.x+tmpShape.width>canvas.width){ tmpShape.reverseX=true; }; if(!tmpShape.reverseX){ tmpShape.x+=2; }else{ tmpShape.x-=2; }; if(!tmpShape.reverseY){ tmpShape.Y+=2; }else{ tmpShape.Y-=2; };};if(startAimate){ setTimeout(animateCanvas,33);}};var start=document.getElementById('start');var stop=document.getElementById('stop');start.onclick=function(){start.style.display="none";stop.style.display="block";startAimate=true;animateCanvas();};stop.onclick=function(){start.style.display='block';stop.style.display='none'startAimate=false;}</script></html> 首先，我们先在一个空白页面上创建两个按钮和一个画布，这个大家都会的，不废话了，其次就是添加按钮的显示逻辑，即：点击开始，开始消失，停止键出现，点击停止，停止键消失，开始键出现；当然点击对应的按钮时，使用canvas所创建的动画也必须要有一定的响应，否则傻傻的点击按钮又没有什么意思（这里的响应我会在下面解释如何实现）。好了，按钮逻辑说完了，现在开始重头戏，即本文的主体内容：首先要先获取canvas标签，document.getElementById('canvas');并将它赋值个canvas，然后获取canvas标签的上下文环境，即2d环境：var context=canvas.getContext('2d')；之后的开发全都基于这个环境来开发；在给canvas设置好宽高之后，你会看到我申明了一个startAimate，这个值是为下面做判断时用的一个标识，if(startAimate){setTimeout(animateCanvas,33);}。你会看到，只有当startAimate为true时才会执行这个setTimeout函数，这里也就印证了上面所说的按钮逻辑如何控制动画的停止与开始；当一开始你点击start键时，startAimate=true; 会为startAimate附一个true值，这里上面的那个if语句的条件就成立了便会执行setTimeout函数。点击stop键同理。执行到了setTimeout函数，你便会看到函数里面的animateCanvas函数，好了，是不是晕了，一层函数套一层函数，没关系，再来给你理一遍思路，首先点击start按钮，给startAimate赋一个值true值，这里if条件满足，又会执行里面的setTimeout函数，可是setTimeout函数不能空执行，没有值啊，那么这里就会传一个animateCanvas函数作为他的值来执行。那后面的那个33是什么意思呢，小伙伴们肯定都打游戏，打游戏的时候都会有一个fps值，当然fps值越高，游戏画面看起来越流畅，这里的原理就和这个33类似，解释每间隔多少时间执行一次这个函数。注：fps原理只是类似，注意是类似，大神别喷我哈，我只是想有助于大家的理解。下面就带大家理解一下animateCanvas函数，在理解animateCanvas函数之前，我先解释一下即将用到的两个canvas方法，第一个是clearRect，第二个是fillRect，clearRect是清除画布内容，context.clearRect(0,0,canvas.width,canvas.height);0，0代表着清除起始坐标，,canvas.width,canvas.height为清除区域的宽和高，这里面为什么要设置这个值呢，就是因为js每执行一遍就要清除一遍画布，否者如果每次只执行不清除，每隔33秒所绘制的图案都会堆积在画布上，可想而知是一个什么样的情况。第二个是fillRect，fillRect是绘制正方形小格，fillRect（a,b,c,d）里面的参数与clearRect同样的意思。
var shapes=new Array();for(var i=0;i<10;i++){var x=Math.random()*250;var y=Math.random()*250;var width=height=Math.random()*50;shapes.push(new shape(x,y,width,height));};忘记和大家解释一下这串代码的意思了，这串代码是随机生成10个数组，将生成的数组添加到shapes中，以便后面取值，后面是哪里呢，后面就是fillRect的10组值，意思就是随机生成10组数，将生成的10组数当作fillRect的参数传进去，这样就会在画布的随机的某十个位置绘制出十个大小随机的正方形。注意一下，这里绘制的十个小正方形是在animateCanvas函数之外的，意思是初始情况下的十个小矩形。正方形绘制出来之后，下面就是制作动画了：for(var i=0;i<shapes.length;i++){var tmpShape=shapes[i];tmpShape.x+=Math.random()*4-2;tmpShape.y+=Math.random()*4-2;context.fillRect(tmpShape.x,tmpShape.y,tmpShape.width,tmpShape.height);}又来了一个for循环，这一个个的for循环是不是都把大家整晕了，说实话把我也整晕了，这个for循环改变的就是tmpShape.x,tmpShape.y,即，上文所说的正方形位置这两个参数，这两个参数会在-2和2之间随机取值，每隔33毫秒取一次值，这样给人的感觉就是来回上下摆动，并且还在自身的基础上叠加，个人的感觉就是所有的小方块都在都在抖动着向右下方移动。 if(tmpShape.x<0){ tmpShape.reverseX=false; }else if(tmpShape.x+tmpShape.width>canvas.width){ tmpShape.reverseX=true; }; if(!tmpShape.reverseX){ tmpShape.x+=2; }else{ tmpShape.x-=2; }; if(!tmpShape.reverseY){ tmpShape.Y+=2; }else{ tmpShape.Y-=2; };那么移动到了canvas画布的边缘怎么办呢，如果不加如上面的代码进行限制，在这十个小方块移动到canvas边缘的时候就会消失，在加入这个判断之后就会对所有小块的移动位置进行检测，if语句大家都能看的懂，这里我就不对他进行深入说明了。总体来说，这些这一小段代码还是非常简单的，不过还是前提大家要把js学学好，前端这个行业真的是学不好js寸步难行啊。里面设计到的有关js的方法，小伙伴们要是不是很理解的话可以在评论区提问，大家一起互动，也可以去度娘，总之大家相互学习，一起进步吧。