canvas学习笔记：小小滴公式，大大滴乐趣

最近想弄一个网页，把自己学HTML5过程中做的部分DEMO放上去做集合，但是，如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了。就想，既然学了canvas，那就来折腾下浏览器，做个小小的开场动画吧。

成都创新互联公司专注于企业全网营销推广、网站重做改版、陆河网站定制设计、自适应品牌网站建设、H5页面制作、商城建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为陆河等各大城市提供网站开发制作服务。

开场动画的效果，想了一会，决定用粒子，因为觉得粒子比较好玩。还记得以前我写的***篇技术博文，就是讲文字图片粒子化的：文字图片粒子化 ， 那时就仅仅做的是直线运动，顺便加了一点3D效果。运动公式很简单。所以就想这个开场动画就做的更动感一些吧。

先上DEMO：http://2.axescanvas.sinaapp.com/demoHome/index.html

效果是不是比直线的运动更加动感呢？而且也确实很简单，别忘了这篇博文的题目，小小滴公式，大大滴乐趣。要做出这样的效果，用的就仅仅是我们初中。。或者高中时候的物理知识，加速运动，减速运动的公式啦。所以确实是小小滴公式。楼主很喜欢折腾一些酷炫的东西，虽然可能平时工作上用不上，但是，这乐趣确实很让人着迷啊。而且，做下这些也可以加强一下编程的思维能力哈。

废话不多说，进入主题啦。就简单的解释一下原理吧~~~

粒子运动的核心代码就这么一点：

 
 
    
  
  
  1. update:function(time){ 
    2. 
  
  
  2.             this.x += this.vx*time; 
    3. 
  
  
  3.             this.y += this.vy*time; 
    4. 
  
  
  4. 
  
  
  5.             if(!this.globleDown&&this.y>0){ 
    6. 
  
  
  6.                 var yc = this.toy - this.y; 
    7. 
  
  
  7.                 var xc = this.tox - this.x; 
    8. 
  
  
  8. 
  
  
  9.                 this.jl = Math.sqrt(xc*xc+yc*yc); 
    10. 
  
  
  10. 
  
  
  11.                 var za = 20; 
    12. 
  
  
  12. 
  
  
  13.                 var ax = za*(xc/this.jl), 
    14. 
  
  
  14.                     ay = za*(yc/this.jl), 
    15. 
  
  
  15.                     vx = (this.vx+ax*time)*0.97, 
    16. 
  
  
  16.                     vy = (this.vy+ay*time)*0.97; 
    17. 
  
  
  17. 
  
  
  18.                 this.vx = vx; 
    19. 
  
  
  19.                 this.vy = vy; 
    20. 
  
  
  20. 
  
  
  21.             }else { 
    22. 
  
  
  22.                 var gravity = 9.8; 
    23. 
  
  
  23.                 var vy = this.vy+gravity*time; 
    24. 
  
  
  24. 
  
  
  25.                 if(this.y>canvas.height){ 
    26. 
  
  
  26.                     vy = -vy*0.7; 
    27. 
  
  
  27.                 } 
    28. 
  
  
  28. 
  
  
  29.                 this.vy = vy; 
    30. 
  
  
  30.             } 
    31. 
  
  
  31.         },
    32.

粒子总共有两种状态，一种是自由落体，一种就是受到吸力。自由落体就不说了。说吸力之前先贴出粒子的属性：

 
 
    
  
  
  1. var Dot = function(x,y,vx,vy,tox,toy,color){ 
    2. 
  
  
  2.         this.x=x; 
    3. 
  
  
  3.         this.y=y; 
    4. 
  
  
  4.         this.vx=vx; 
    5. 
  
  
  5.         this.vy=vy; 
    6. 
  
  
  6.         this.nextox = tox; 
    7. 
  
  
  7.         this.nextoy = toy; 
    8. 
  
  
  8.         this.color = color; 
    9. 
  
  
  9.         this.visible = true; 
    10. 
  
  
  10.         this.globleDown = false; 
    11. 
  
  
  11.         this.setEnd(tox , toy); 
    12. 
  
  
  12.     } 
    13. 
  
  
  13. 
  
  
  14. setEnd:function(tox , toy){ 
    15. 
  
  
  15.             this.tox = tox; 
    16. 
  
  
  16.             this.toy = toy; 
    17. 
  
  
  17.             var yc = this.toy - this.y; 
    18. 
  
  
  18.             var xc = this.tox - this.x; 
    19. 
  
  
  19.         },
    20.

x,y就是粒子的位置，vx是粒子水平速度，vy是粒子的垂直速度，nexttox之类知不知道都无所谓，只是暂时保存变量的。tox，和toy就是粒子的目的地位置。

首先，先给予所有粒子一个目的地，这个目的地下面再会说。也就是要粒子到达的地方，然后再定义一个变量za作为加速度，具体数值的话，就自己多测试下就会有大概参数的了，我设成20，感觉就差不多了。za是粒子和目的地之间连线的加速度，所以，我们通过粒子的位置和目的地的位置，通过简单的三角函数，就可以把粒子的水平加速度和垂直加速度求出来了，就这段

 
 
    
  
  
  1. var ax = za*(xc/this.jl), 
    2. 
  
  
  2.  ay = za*(yc/this.jl),
    3.

有了水平加速度和垂直加速度后，接下来就更简单了，直接计算水平速度和垂直速度的增量，从而改变水平速度和垂直速度的值

 
 
    
  
  
  1. vx = (this.vx+ax*time)*0.97, 
    2. 
  
  
  2. vy = (this.vy+ay*time)*0.97;
    3.

之所以要乘于0.97是为了模拟能量损耗，粒子才会减速。time是每一帧的时间差

计算出速度后就更新粒子位置就行了。

 
 
    
  
  
  1. this.x += this.vx*time; 
    2. 
  
  
  2. this.y += this.vy*time;
    3.

因为粒子在飞行过程中，与目的地之间的连线方向是不停改变的，所以每一帧都要重新计算粒子的水平加速度和垂直加速度。

运动原理就是如此，是否很简单呢。

运动原理说完了，再扯一下上面那个动画的具体实现吧：动画初始化，在一个离屏canvas上把想要的字或者图片画出来，然后再通过getImageData这个方法获取离屏canvas的像素。然后用一个循环，把离屏canvas中有绘制的区域找出来，因为imageData里的data值就是一个rgba数组，所以我们判断***一个的值也就是透明度大于128就是有绘制过的区域。然后获取该区域的xy值，为了防止粒子对象过多导致页面卡顿，所以我们就限制一下粒子的数量，取像素的时候x值和y值每次递增2，从而减少粒子数量。

 
 
    
  
  
  1. this.osCanvas = document.createElement("canvas"); 
    2. 
  
  
  2.         var osCtx = this.osCanvas.getContext("2d"); 
    3. 
  
  
  3. 
  
  
  4.         this.osCanvas.width = 1000; 
    5. 
  
  
  5.         this.osCanvas.height = 150; 
    6. 
  
  
  6. 
  
  
  7.         osCtx.textAlign = "center"; 
    8. 
  
  
  8.         osCtx.textBaseline = "middle"; 
    9. 
  
  
  9.         osCtx.font="70px 微软雅黑,黑体 bold"; 
    10. 
  
  
  10.         osCtx.fillStyle = "#1D181F"
    11. 
  
  
  11.         osCtx.fillText("WelCome" , this.osCanvas.width/2 , this.osCanvas.height/2-40); 
    12. 
  
  
  12.         osCtx.fillText("To wAxes' HOME" , this.osCanvas.width/2 , this.osCanvas.height/2+40); 
    13. 
  
  
  13.         var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height); 
    14. 
  
  
  14. 
  
  
  15.         dots = []; 
    16. 
  
  
  16. 
  
  
  17.         for(var x=0;x
  
  
  18.             for(var y=0;y
  
  
  19.                 var i = (y*bigImageData.width + x)*4; 
    20. 
  
  
  20.                 if(bigImageData.data[i+3]>128){ 
    21. 
  
  
  21.                     var dot = new Dot( 
    22. 
  
  
  22.                         Math.random()>0.5?Math.random()*20+10:Math.random()*20+canvas.width-40, 
    23. 
  
  
  23.                         -Math.random()*canvas.height*2, 
    24. 
  
  
  24.                         0, 
    25. 
  
  
  25.                         0, 
    26. 
  
  
  26.                         x+(canvas.width/2-this.osCanvas.width/2), 
    27. 
  
  
  27.                         y+(canvas.height/2-this.osCanvas.height/2), 
    28. 
  
  
  28.                         "rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)"
    29. 
  
  
  29.                     ); 
    30. 
  
  
  30.                     dot.setEnd(canvas.width/2,canvas.height/2) 
    31. 
  
  
  31.                     dots.push(dot); 
    32. 
  
  
  32.                 } 
    33. 
  
  
  33.             } 
    34. 
  
  
  34.         }
    35.

通过循环获取到粒子的位置xy值后，把位置赋给粒子，成为粒子的目的地。然后动画开始，就可以做出文字图片粒子化的效果了。

#p#

下面贴出动画实现的js代码。如果对其他代码也有兴趣的，可以直接看控制台哈，没压缩的。

 
 
    
  
  
  1. var part_1 = (function(w){ 
    2. 
  
  
  2.     var dots = [],DOT_SIZE = 2,cube=null; 
    3. 
  
  
  3. 
  
  
  4.     var Dot = function(x,y,vx,vy,tox,toy,color){ 
    5. 
  
  
  5.         this.x=x; 
    6. 
  
  
  6.         this.y=y; 
    7. 
  
  
  7.         this.vx=vx; 
    8. 
  
  
  8.         this.vy=vy; 
    9. 
  
  
  9.         this.nextox = tox; 
    10. 
  
  
  10.         this.nextoy = toy; 
    11. 
  
  
  11.         this.color = color; 
    12. 
  
  
  12.         this.visible = true; 
    13. 
  
  
  13.         this.globleDown = false; 
    14. 
  
  
  14.         this.setEnd(tox , toy); 
    15. 
  
  
  15.     } 
    16. 
  
  
  16. 
  
  
  17.     Dot.prototype = { 
    18. 
  
  
  18.         paint:function(){ 
    19. 
  
  
  19.             ctx.fillStyle=this.color; 
    20. 
  
  
  20.             ctx.fillRect(this.x-DOT_SIZE/2 , this.y-DOT_SIZE/2 , DOT_SIZE , DOT_SIZE); 
    21. 
  
  
  21.         }, 
    22. 
  
  
  22. 
  
  
  23.         setEnd:function(tox , toy){ 
    24. 
  
  
  24.             this.tox = tox; 
    25. 
  
  
  25.             this.toy = toy; 
    26. 
  
  
  26.             var yc = this.toy - this.y; 
    27. 
  
  
  27.             var xc = this.tox - this.x; 
    28. 
  
  
  28.             // this.initjl = Math.sqrt(xc*xc+yc*yc); 
    29. 
  
  
  29.         }, 
    30. 
  
  
  30. 
  
  
  31.         update:function(time){ 
    32. 
  
  
  32.             this.x += this.vx*time; 
    33. 
  
  
  33.             this.y += this.vy*time; 
    34. 
  
  
  34. 
  
  
  35.             if(!this.globleDown&&this.y>0){ 
    36. 
  
  
  36.                 var yc = this.toy - this.y; 
    37. 
  
  
  37.                 var xc = this.tox - this.x; 
    38. 
  
  
  38. 
  
  
  39.                 this.jl = Math.sqrt(xc*xc+yc*yc); 
    40. 
  
  
  40. 
  
  
  41.                 var za = 20; 
    42. 
  
  
  42. 
  
  
  43.                 var ax = za*(xc/this.jl), 
    44. 
  
  
  44.                     ay = za*(yc/this.jl), 
    45. 
  
  
  45.                     vx = (this.vx+ax*time)*0.97, 
    46. 
  
  
  46.                     vy = (this.vy+ay*time)*0.97; 
    47. 
  
  
  47. 
  
  
  48.                 this.vx = vx; 
    49. 
  
  
  49.                 this.vy = vy; 
    50. 
  
  
  50. 
  
  
  51.                 // if(Math.abs(this.vx)<1&&Math.abs(this.vy)<1){ 
    52. 
  
  
  52.                 //     this.y = this.toy 
    53. 
  
  
  53.                 //     this.x = this.tox 
    54. 
  
  
  54.                 // } 
    55. 
  
  
  55.             }else { 
    56. 
  
  
  56.                 var gravity = 9.8; 
    57. 
  
  
  57.                 var vy = this.vy+gravity*time; 
    58. 
  
  
  58. 
  
  
  59.                 if(this.y>canvas.height){ 
    60. 
  
  
  60.                     vy = -vy*0.7; 
    61. 
  
  
  61.                 } 
    62. 
  
  
  62. 
  
  
  63.                 this.vy = vy; 
    64. 
  
  
  64.             } 
    65. 
  
  
  65.         }, 
    66. 
  
  
  66. 
  
  
  67.         loop:function(time){ 
    68. 
  
  
  68.             this.update(time); 
    69. 
  
  
  69.             this.paint(); 
    70. 
  
  
  70.         } 
    71. 
  
  
  71.     } 
    72. 
  
  
  72. 
  
  
  73.      
    74. 
  
  
  74. 
  
  
  75.     var animate = function(){ 
    76. 
  
  
  76.         this.state = "before"
    77. 
  
  
  77.     } 
    78. 
  
  
  78. 
  
  
  79.     var ap = animate.prototype; 
    80. 
  
  
  80. 
  
  
  81.     ap.init = function(){ 
    82. 
  
  
  82.         this.osCanvas = document.createElement("canvas"); 
    83. 
  
  
  83.         var osCtx = this.osCanvas.getContext("2d"); 
    84. 
  
  
  84. 
  
  
  85.         this.osCanvas.width = 1000; 
    86. 
  
  
  86.         this.osCanvas.height = 150; 
    87. 
  
  
  87. 
  
  
  88.         osCtx.textAlign = "center"; 
    89. 
  
  
  89.         osCtx.textBaseline = "middle"; 
    90. 
  
  
  90.         osCtx.font="70px 微软雅黑,黑体 bold"; 
    91. 
  
  
  91.         osCtx.fillStyle = "#1D181F"
    92. 
  
  
  92.         osCtx.fillText("WelCome" , this.osCanvas.width/2 , this.osCanvas.height/2-40); 
    93. 
  
  
  93.         osCtx.fillText("To wAxes' HOME" , this.osCanvas.width/2 , this.osCanvas.height/2+40); 
    94. 
  
  
  94.         var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height); 
    95. 
  
  
  95. 
  
  
  96.         dots = []; 
    97. 
  
  
  97. 
  
  
  98.         for(var x=0;x
  
  
  99.             for(var y=0;y
  
  
  100.                 var i = (y*bigImageData.width + x)*4; 
    101. 
  
  
  101.                 if(bigImageData.data[i+3]>128){ 
    102. 
  
  
  102.                     var dot = new Dot( 
    103. 
  
  
  103.                         Math.random()>0.5?Math.random()*20+10:Math.random()*20+canvas.width-40, 
    104. 
  
  
  104.                         -Math.random()*canvas.height*2, 
    105. 
  
  
  105.                         0, 
    106. 
  
  
  106.                         0, 
    107. 
  
  
  107.                         x+(canvas.width/2-this.osCanvas.width/2), 
    108. 
  
  
  108.                         y+(canvas.height/2-this.osCanvas.height/2), 
    109. 
  
  
  109.                         "rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)"
    110. 
  
  
  110.                     ); 
    111. 
  
  
  111.                     dot.setEnd(canvas.width/2,canvas.height/2) 
    112. 
  
  
  112.                     dots.push(dot); 
    113. 
  
  
  113.                 } 
    114. 
  
  
  114.             } 
    115. 
  
  
  115.         } 
    116. 
  
  
  116.         console.log(dots.length) 
    117. 
  
  
  117.     } 
    118. 
  
  
  118. 
  
  
  119.     ap.changeState = function(){ 
    120. 
  
  
  120.         var osCtx = this.osCanvas.getContext("2d"); 
    121. 
  
  
  121.         osCtx.clearRect(0,0,this.osCanvas.width,this.osCanvas.height); 
    122. 
  
  
  122.         this.osCanvas.width = 460; 
    123. 
  
  
  123.         this.osCanvas.height = 100; 
    124. 
  
  
  124. 
  
  
  125.         osCtx.fillStyle="#5C5656"
    126. 
  
  
  126.         osCtx.fillRect(20,20,60,60) 
    127. 
  
  
  127. 
  
  
  128.         drawLogo(this.osCanvas , osCtx); 
    129. 
  
  
  129. 
  
  
  130.         var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height); 
    131. 
  
  
  131. 
  
  
  132.         var index=0; 
    133. 
  
  
  133.         dots.sort(function(a , b){ 
    134. 
  
  
  134.             return Math.random()-Math.random(); 
    135. 
  
  
  135.         }) 
    136. 
  
  
  136.         for(var x=0;x
  
  
  137.             for(var y=0;y
  
  
  138.                 var i = (y*bigImageData.width + x)*4; 
    139. 
  
  
  139.                 if(bigImageData.data[i+3]>128){ 
    140. 
  
  
  140.                         var d = dots[index]; 
    141. 
  
  
  141.                         if(d){ 
    142. 
  
  
  142.                             d.setEnd(x+(canvas.width/2-300) , y+50) 
    143. 
  
  
  143.                             d.color = "rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)"; 
    144. 
  
  
  144.                             index++ 
    145. 
  
  
  145.                         } 
    146. 
  
  
  146.                 } 
    147. 
  
  
  147.             } 
    148. 
  
  
  148.         } 
    149. 
  
  
  149. 
  
  
  150.         setTimeout(function(){ 
    151. 
  
  
  151.             var endindex = index; 
    152. 
  
  
  152.             for(var i=0;i
  
  
  153.                 if(dots[index]){ 
    154. 
  
  
  154.                     var d = dots[index]; 
    155. 
  
  
  155.                      
    156. 
  
  
  156.                     d.globleDown = true; 
    157. 
  
  
  157.                     d.vx = Math.random()*100-50; 
    158. 
  
  
  158.                 } 
    159. 
  
  
  159.                 index++; 
    160. 
  
  
  160.             } 
    161. 
  
  
  161.         } , 2000) 
    162. 
  
  
  162.     } 
    163. 
  
  
  163. 
  
  
  164. 
  
  
  165.     function endState(){ 
    166. 
  
  
  166.         canvas.width = 600; 
    167. 
  
  
  167.         canvas.height = 100; 
    168. 
  
  
  168.         canvas.style.display="block"; 
    169. 
  
  
  169.         canvas.style.top = "50px"; 
    170. 
  
  
  170.         canvas.style.left = (window.innerWidth-canvas.width)/2+"px"; 
    171. 
  
  
  171.         cube = new Cube(50); 
    172. 
  
  
  172.         cube._initVector(50,50); 
    173. 
  
  
  173.     } 
    174. 
  
  
  174. 
  
  
  175.     function drawLogo(canvas , ctx){ 
    176. 
  
  
  176.         ctx.textAlign = "center"; 
    177. 
  
  
  177.         ctx.textBaseline = "middle"; 
    178. 
  
  
  178.         ctx.font="65px 微软雅黑,黑体 bold"
    179. 
  
  
  179.         ctx.fillStyle="#E06D2F"
    180. 
  
  
  180.         ctx.fillText("DEMO" , 300 , canvas.height/2) 
    181. 
  
  
  181. 
  
  
  182.         ctx.font="40px 微软雅黑,黑体 bold"
    183. 
  
  
  183.         ctx.fillStyle="#405159"
    184. 
  
  
  184.         ctx.fillText("吖猩的" , 160 , canvas.height/2) 
    185. 
  
  
  185.         ctx.fillText("小窝" , 420 , canvas.height/2) 
    186. 
  
  
  186.     } 
    187. 
  
  
  187. 
  
  
  188.     var num = 0; 
    189. 
  
  
  189.     ap.update = function(time){ 
    190. 
  
  
  190.         time = time/100; 
    191. 
  
  
  191.         if(this.state==="first"||this.state==="before"){ 
    192. 
  
  
  192.             var completeNum = 0; 
    193. 
  
  
  193.             dots.forEach(function(dot){ 
    194. 
  
  
  194.                 if(dot.visible) dot.loop(time); 
    195. 
  
  
  195.                 if(dot.jl<5){ 
    196. 
  
  
  196.                     completeNum++ 
    197. 
  
  
  197.                 } 
    198. 
  
  
  198.             }); 
    199. 
  
  
  199.             if(completeNum>=5*dots.length/6){ 
    200. 
  
  
  200.                  
    201. 
  
  
  201.                 if(this.state==="before"){ 
    202. 
  
  
  202.                     this.state = "first"; 
    203. 
  
  
  203.                     dots.forEach(function(dot){ 
    204. 
  
  
  204.                         dot.setEnd(dot.nextox , dot.nextoy); 
    205. 
  
  
  205.                     }); 
    206. 
  
  
  206.                 }else { 
    207. 
  
  
  207.                     this.state = "second"; 
    208. 
  
  
  208.                     this.changeState(); 
    209. 
  
  
  209.                 } 
    210. 
  
  
  210.             } 
    211. 
  
  
  211.         }else if(this.state==="second"){ 
    212. 
  
  
  212.             var completeNum = 0, 
    213. 
  
  
  213.                 allnum = 0; 
    214. 
  
  
  214.             dots.forEach(function(dot){ 
    215. 
  
  
  215.                 if(dot.visible) dot.loop(time); 
    216. 
  
  
  216.                 if(dot.globleDown){ 
    217. 
  
  
  217.                     allnum++; 
    218. 
  
  
  218.                     if(Math.abs(dot.y-canvas.height)<2){ 
    219. 
  
  
  219.                         completeNum++ 
    220. 
  
  
  220.                     } 
    221. 
  
  
  221.                 } 
    222. 
  
  
  222.             }); 
    223. 
  
  
  223. 
  
  
  224.             if(completeNum===allnum&&allnum!==0){ 
    225. 
  
  
  225.                 this.state = "third"; 
    226. 
  
  
  226.                 part_2.animate(); 
    227. 
  
  
  227.                 endState(); 
    228. 
  
  
  228.             } 
    229. 
  
  
  229.         }else if(this.state==="third"){ 
    230. 
  
  
  230.             cube.update(); 
    231. 
  
  
  231.             drawLogo(canvas , ctx); 
    232. 
  
  
  232.         } 
    233. 
  
  
  233.     } 
    234. 
  
  
  234. 
  
  
  235.     return new animate(); 
    236. 
  
  
  236. })(window)
    237.

当前题目：canvas学习笔记：小小滴公式，大大滴乐趣
转载来于：http://www.csdahua.cn/qtweb/news28/491328.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

域名注册知识

分类信息网站

成都气球装饰　　 　一元广告　　 　域名ssl证书　　 　成都网站建设　　 　成都网站制作　　 　成都服务器托管　　 　百度关键词排名　　 　蜀锦在线　　 　绵阳服务器托管　　 　视频运营　　 　达州电信机房　　 　主动防护网　　 　消防工程　　 　成都营销网站建设　　 　手提袋印刷制作　　 　成都移动服务器托管　　 　成都手机网站开发　　 　成都机柜租用　　 　广西弘博建站　　 　蜜朵婚庆