请选择 进入手机版 | 继续访问电脑版
查看: 4871|回复: 218

[新手教程] HTML5 Canvas 破碎重组的视频特效

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-4-18 14:21:09 | 显示全部楼层 |阅读模式

也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒。
QQ截图20170418142703.jpg

HTML代码
  1. <div style="display:none">
  2.                 <video id="sourcevid" autoplay="true" loop="true">
  3.                         <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
  4.                         <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>
  5.                 </video>
  6.                 <canvas id="sourcecopy" width="640" height="360"></canvas>
  7. </div>
  8. <div>
  9. <center>
  10.         <div style="z-index:1;position:relative;text-align:center;font-size:16px;font-weight:bold;width:1000px;top:60px;">Click video to blow it up!</div>
  11.         <canvas id="output" width="1000" height="600" onmousedown="dropBomb(event, this)" style="border: 0 none">        </canvas>
  12. </center>
  13. </div>
复制代码

JavaScript代码
  1. var video;
  2. var copy;
  3. var copycanvas;
  4. var draw;

  5. var TILE_WIDTH = 32;
  6. var TILE_HEIGHT = 24;
  7. var TILE_CENTER_WIDTH = 16;
  8. var TILE_CENTER_HEIGHT = 12;
  9. var SOURCERECT = {x:0, y:0, width:0, height:0};
  10. var PAINTRECT = {x:0, y:0, width:1000, height:600};

  11. function init(){
  12.         video = document.getElementById('sourcevid');
  13.         copycanvas = document.getElementById('sourcecopy');
  14.         copy = copycanvas.getContext('2d');
  15.         var outputcanvas = document.getElementById('output');
  16.         draw = outputcanvas.getContext('2d');
  17.         setInterval("processFrame()", 33);
  18. }
  19. function createTiles(){
  20.         var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;
  21.         var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;
  22.         var y=0;
  23.         while(y < SOURCERECT.height){
  24.                 var x=0;
  25.                 while(x < SOURCERECT.width){
  26.                         var tile = new Tile();
  27.                         tile.videoX = x;
  28.                         tile.videoY = y;
  29.                         tile.originX = offsetX+x;
  30.                         tile.originY = offsetY+y;
  31.                         tile.currentX = tile.originX;
  32.                         tile.currentY = tile.originY;
  33.                         tiles.push(tile);
  34.                         x+=TILE_WIDTH;
  35.                 }
  36.                 y+=TILE_HEIGHT;
  37.         }
  38. }

  39. var RAD = Math.PI/180;
  40. var randomJump = false;
  41. var tiles = [];
  42. var debug = false;
  43. function processFrame(){
  44.         if(!isNaN(video.duration)){
  45.                 if(SOURCERECT.width == 0){
  46.                         SOURCERECT = {x:0,y:0,width:video.videoWidth,height:video.videoHeight};
  47.                         createTiles();
  48.                 }
  49.                 //this is to keep my sanity while developing
  50.                 if(randomJump){
  51.                         randomJump = false;
  52.                         video.currentTime = Math.random()*video.duration;
  53.                 }
  54.                 //loop
  55.                 if(video.currentTime == video.duration){
  56.                         video.currentTime = 0;
  57.                 }
  58.         }
  59.         var debugStr = "";
  60.         //copy tiles
  61.         copy.drawImage(video, 0, 0);
  62.         draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);

  63.         for(var i=0; i<tiles.length; i++){
  64.                 var tile = tiles[i];
  65.                 if(tile.force > 0.0001){
  66.                         //expand
  67.                         tile.moveX *= tile.force;
  68.                         tile.moveY *= tile.force;
  69.                         tile.moveRotation *= tile.force;
  70.                         tile.currentX += tile.moveX;
  71.                         tile.currentY += tile.moveY;
  72.                         tile.rotation += tile.moveRotation;
  73.                         tile.rotation %= 360;
  74.                         tile.force *= 0.9;
  75.                         if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){
  76.                                 tile.moveX *= -1;
  77.                         }
  78.                         if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){
  79.                                 tile.moveY *= -1;
  80.                         }
  81.                 }else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){
  82.                         //contract
  83.                         var diffx = (tile.originX-tile.currentX)*0.2;
  84.                         var diffy = (tile.originY-tile.currentY)*0.2;
  85.                         var diffRot = (0-tile.rotation)*0.2;

  86.                         if(Math.abs(diffx) < 0.5){
  87.                                 tile.currentX = tile.originX;
  88.                         }else{
  89.                                 tile.currentX += diffx;
  90.                         }
  91.                         if(Math.abs(diffy) < 0.5){
  92.                                 tile.currentY = tile.originY;
  93.                         }else{
  94.                                 tile.currentY += diffy;
  95.                         }
  96.                         if(Math.abs(diffRot) < 0.5){
  97.                                 tile.rotation = 0;
  98.                         }else{
  99.                                 tile.rotation += diffRot;
  100.                         }
  101.                 }else{
  102.                         tile.force = 0;
  103.                 }
  104.                 draw.save();
  105.                 draw.translate(tile.currentX, tile.currentY);
  106.                 draw.rotate(tile.rotation*RAD);
  107.                 draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);
  108.                 draw.restore();
  109.         }
  110.         if(debug){
  111.                 debug = false;
  112.                 document.getElementById('trace').innerHTML = debugStr;
  113.         }
  114. }

  115. function explode(x, y){
  116.         for(var i=0; i<tiles.length; i++){
  117.                 var tile = tiles[i];

  118.                 var xdiff = tile.currentX-x;
  119.                 var ydiff = tile.currentY-y;
  120.                 var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);

  121.                 var randRange = 220+(Math.random()*30);
  122.                 var range = randRange-dist;
  123.                 var force = 3*(range/randRange);
  124.                 if(force > tile.force){
  125.                         tile.force = force;
  126.                         var radians = Math.atan2(ydiff, xdiff);
  127.                         tile.moveX = Math.cos(radians);
  128.                         tile.moveY = Math.sin(radians);
  129.                         tile.moveRotation = 0.5-Math.random();
  130.                 }
  131.         }
  132.         tiles.sort(zindexSort);
  133.         processFrame();
  134. }
  135. function zindexSort(a, b){
  136.         return (a.force-b.force);
  137. }

  138. function dropBomb(evt, obj){
  139.         var posx = 0;
  140.         var posy = 0;
  141.         var e = evt || window.event;
  142.         if (e.pageX || e.pageY){
  143.                 posx = e.pageX;
  144.                 posy = e.pageY;
  145.         }else if (e.clientX || e.clientY) {
  146.                 posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  147.                 posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  148.         }
  149.         var canvasX = posx-obj.offsetLeft;
  150.         var canvasY = posy-obj.offsetTop;
  151.         explode(canvasX, canvasY);
  152. }

  153. function Tile(){
  154.         this.originX = 0;
  155.         this.originY = 0;
  156.         this.currentX = 0;
  157.         this.currentY = 0;
  158.         this.rotation = 0;
  159.         this.force = 0;
  160.         this.z = 0;
  161.         this.moveX= 0;
  162.         this.moveY= 0;
  163.         this.moveRotation = 0;

  164.         this.videoX = 0;
  165.         this.videoY = 0;
  166. }

  167. /*
  168.         getPixel
  169.         return pixel object {r,g,b,a}
  170. */
  171. function getPixel(imageData, x, y){
  172.         var data = imageData.data;
  173.         var pos = (x + y * imageData.width) * 4;
  174.         return {r:data[pos], g:data[pos+1], b:data[pos+2], a:data[pos+3]}
  175. }
  176. /*
  177.         setPixel
  178.         set pixel object {r,g,b,a}
  179. */
  180. function setPixel(imageData, x, y, pixel){
  181.         var data = imageData.data;
  182.         var pos = (x + y * imageData.width) * 4;
  183.         data[pos] = pixel.r;
  184.         data[pos+1] = pixel.g;
  185.         data[pos+2] = pixel.b;
  186.         data[pos+3] = pixel.a;
  187. }
  188. /*
  189.         copyPixel
  190.         faster then using getPixel/setPixel combo
  191. */
  192. function copyPixel(sImageData, sx, sy, dImageData, dx, dy){
  193.         var spos = (sx + sy * sImageData.width) * 4;
  194.         var dpos = (dx + dy * dImageData.width) * 4;
  195.         dImageData.data[dpos] = sImageData.data[spos];     //R
  196.         dImageData.data[dpos+1] = sImageData.data[spos+1]; //G
  197.         dImageData.data[dpos+2] = sImageData.data[spos+2]; //B
  198.         dImageData.data[dpos+3] = sImageData.data[spos+3]; //A
  199. }
  200. </script>
复制代码

HTML5 Canvas 破碎重组的视频特效.zip (5.35 MB, 下载次数: 39, 售价: 2 铜板)
最佳答案
0 
zx16800 发表于 2017-4-18 16:23:08 | 显示全部楼层
我是来学习的~!
最佳答案
0 
bboykelwa 发表于 2017-4-21 13:06:05 | 显示全部楼层
666666666666666666
最佳答案
0 
任曙光620 发表于 2017-4-21 13:31:58 | 显示全部楼层

活动不错,支持.坐看各路大神各显神通
最佳答案
0 
任曙光620 发表于 2017-4-21 13:32:05 | 显示全部楼层

活动不错,支持.坐看各路大神各显神通
最佳答案
0 
jst123 发表于 2017-4-21 14:27:18 | 显示全部楼层
6666666666666666666666666666666666
最佳答案
0 
亚瑟爱罗 发表于 2017-4-22 10:29:46 | 显示全部楼层
拿出小笔记
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表