分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了HTML5 canvas绘图制作打击视频玻璃破碎动画效果，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

HTML5 canvas绘图制作打击视频玻璃破碎动画效果

<!DOCTYPE >
<html >
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">

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,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,width:video.videoWidth,height:video.videoHeight};
   createTiles();
  }

  if(randomJump){
   randomJump = false;
   video.currentTime = Math.random()*video.duration;
  }

  if(video.currentTime == video.duration){
   video.currentTime = 0;
  }
}
var debugStr = "";

copy.drawImage(video,0);
draw.clearRect(PAINTRECT.x,PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);

for(var i=0; i<tiles.length; i++){
  var tile = tiles[i];
  if(tile.force > 0.0001){

   tile.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){

   var 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_HEIGHT);
  draw.restore();
}
if(debug){
  debug = false;
  document.getElementById('trace').innerHTML = debugStr;
}
}

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

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

  var randRange = 220+(Math.random()*30);
  var range = randRange-dist;
  var force = 3*(range/randRangE);
  if(force > 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;
}

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]}
}

function setPixel(imageData,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;
}

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]; //R
dImageData.data[dpos+1] = sImageData.data[spos+1]; //G
dImageData.data[dpos+2] = sImageData.data[spos+2]; //B
dImageData.data[dpos+3] = sImageData.data[spos+3]; //A
}
</script>
</head>