Effect of video fragmentation and Reorganization Based on HTML5Canvas-

You may have seen HTML5 image crushing animation effects, and the implementation principle is quite simple. However, you should have never seen a video that can be broken or reorganized. You can use the related features of HTML5Canvas to achieve the effect of broken and reorganized the video by clicking the mouse. Then, after a while, the broken area is reorganized and restored.

You may have seen HTML5 image fragment animation effects, and the implementation principle is quite simple. However, you should have never seen a video or fragment. This HTML5 animation uses Canvas-related features to achieve the effect of clicking the mouse to fragment the video. Click the mouse in the video area to break down the video in the area. After a while, the broken area can be re-restored, and the visual effect is also great. It is worth a try.

HTML code

  
   
   
  
  

 
  
Click video to blow it up!
   
  
 

JavaScript code

var video;var copy;var copycanvas;var draw;var TILE_WIDTH = 32;var TILE_HEIGHT = 24;var TILE_CENTER_WIDTH = 16;var TILE_CENTER_HEIGHT = 12;var SOURCERECT = {x:0, y:0, width:0, height:0};var PAINTRECT = {x:0, y:0, width:1000, height:600};function init(){video = document.getElementById('sourcevid');copycanvas = document.getElementById('sourcecopy');copy = copycanvas.getContext('2d');var outputcanvas = document.getElementById('output');draw = outputcanvas.getContext('2d');setInterval("processFrame()", 33);}function createTiles(){var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;var y=0;while(y < SOURCERECT.height){var x=0;while(x < SOURCERECT.width){var tile = new Tile();tile.videoX = x;tile.videoY = y;tile.originX = offsetX+x;tile.originY = offsetY+y;tile.currentX = tile.originX;tile.currentY = tile.originY;tiles.push(tile);x+=TILE_WIDTH;}y+=TILE_HEIGHT;}}var RAD = Math.PI/180;var randomJump = false;var tiles = [];var debug = false;function processFrame(){if(!isNaN(video.duration)){if(SOURCERECT.width == 0){SOURCERECT = {x:0,y:0,width:video.videoWidth,height:video.videoHeight};createTiles();}//this is to keep my sanity while developingif(randomJump){randomJump = false;video.currentTime = Math.random()*video.duration;}//loopif(video.currentTime == video.duration){video.currentTime = 0;}}var debugStr = "";//copy tilescopy.drawImage(video, 0, 0);draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);for(var i=0; i
 
   0.0001){//expandtile.moveX *= tile.force;tile.moveY *= tile.force;tile.moveRotation *= tile.force;tile.currentX += tile.moveX;tile.currentY += tile.moveY;tile.rotation += tile.moveRotation;tile.rotation %= 360;tile.force *= 0.9;if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){tile.moveX *= -1;}if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){tile.moveY *= -1;}}else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){//contractvar diffx = (tile.originX-tile.currentX)*0.2;var diffy = (tile.originY-tile.currentY)*0.2;var diffRot = (0-tile.rotation)*0.2;if(Math.abs(diffx) < 0.5){tile.currentX = tile.originX;}else{tile.currentX += diffx;}if(Math.abs(diffy) < 0.5){tile.currentY = tile.originY;}else{tile.currentY += diffy;}if(Math.abs(diffRot) < 0.5){tile.rotation = 0;}else{tile.rotation += diffRot;}}else{tile.force = 0;}draw.save();draw.translate(tile.currentX, tile.currentY);draw.rotate(tile.rotation*RAD);draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);draw.restore();}if(debug){debug = false;document.getElementById('trace').innerHTML = debugStr;}}function explode(x, y){for(var i=0; i
  
    tile.force){tile.force = force;var radians = Math.atan2(ydiff, xdiff);tile.moveX = Math.cos(radians);tile.moveY = Math.sin(radians);tile.moveRotation = 0.5-Math.random();}}tiles.sort(zindexSort);processFrame();}function zindexSort(a, b){return (a.force-b.force);}function dropBomb(evt, obj){var posx = 0;var posy = 0;var e = evt || window.event;if (e.pageX || e.pageY){posx = e.pageX;posy = e.pageY;}else if (e.clientX || e.clientY) {posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;}var canvasX = posx-obj.offsetLeft;var canvasY = posy-obj.offsetTop;explode(canvasX, canvasY);}function Tile(){this.originX = 0;this.originY = 0;this.currentX = 0;this.currentY = 0;this.rotation = 0;this.force = 0;this.z = 0;this.moveX= 0;this.moveY= 0;this.moveRotation = 0;this.videoX = 0;this.videoY = 0;}/*getPixelreturn pixel object {r,g,b,a}*/function getPixel(imageData, x, y){var data = imageData.data;var pos = (x + y * imageData.width) * 4;return {r:data[pos], g:data[pos+1], b:data[pos+2], a:data[pos+3]}}/*setPixelset pixel object {r,g,b,a}*/function setPixel(imageData, x, y, pixel){var data = imageData.data;var pos = (x + y * imageData.width) * 4;data[pos] = pixel.r;data[pos+1] = pixel.g;data[pos+2] = pixel.b;data[pos+3] = pixel.a;}/*copyPixelfaster then using getPixel/setPixel combo*/function copyPixel(sImageData, sx, sy, dImageData, dx, dy){var spos = (sx + sy * sImageData.width) * 4;var dpos = (dx + dy * dImageData.width) * 4;dImageData.data[dpos] = sImageData.data[spos];     //RdImageData.data[dpos+1] = sImageData.data[spos+1]; //GdImageData.data[dpos+2] = sImageData.data[spos+2]; //BdImageData.data[dpos+3] = sImageData.data[spos+3]; //A}《script》
  
 

The above is the content of video fragment and reorganization effects based on HTML5 Canvas. For more information, see PHP Chinese Network (www.php1.cn )!