html5+javascript視頻點碎裂效果

最新推荐文章于 2024-04-16 09:00:00 发布
最新推荐文章于 2024-04-16 09:00:00 发布
阅读量670 收藏
点赞数
分类专栏： javascript html5 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>HTML5 Video Destruction</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var video;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>HTML5 Video Destruction</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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, 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 developing
if(randomJump){
randomJump = false;
video.currentTime = Math.random()*video.duration;
}
//loop
if(video.currentTime == video.duration){
video.currentTime = 0;
}
}
var debugStr = "";
//copy tiles
copy.drawImage(video, 0, 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){
//expand
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){
//contract
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_WIDTH, 

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;
}
/*
getPixel
return 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]}
}
/*
setPixel
set 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;
}
/*
copyPixel
faster 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];     //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>
<body οnlοad="init()" style="margin:0px;">
        <div style="display:none">
            <video id="sourcevid" autoplay loop>
                <source src="egs_3.6_ch2_p4v.mp4" type="video/mp4"/>
            </video>
            <canvas id="sourcecopy" width="640" height="360"></canvas>
        </div>
<center>
        <canvas id="output" width="1000" height="600" οnmοusedοwn="dropBomb(event, this)" style="border: solid 5px #666666"></canvas>
          <br/>
        </center>
</body>
</html>


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 developing
if(randomJump){
randomJump = false;
video.currentTime = Math.random()*video.duration;
}
//loop
if(video.currentTime == video.duration){
video.currentTime = 0;
}
}
var debugStr = "";
//copy tiles
copy.drawImage(video, 0, 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){
//expand
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){
//contract
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_WIDTH, 

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;
}
/*
getPixel
return 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]}
}
/*
setPixel
set 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;
}
/*
copyPixel
faster 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];     //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>
<body οnlοad="init()" style="margin:0px;">
        <div style="display:none">
            <video id="sourcevid" autoplay loop>
                <source src="egs_3.6_ch2_p4v.mp4" type="video/mp4"/>
            </video>
            <canvas id="sourcecopy" width="640" height="360"></canvas>
        </div>
<center>
        <canvas id="output" width="1000" height="600" οnmοusedοwn="dropBomb(event, this)" style="border: solid 5px #666666"></canvas>
          <br/>
        </center>
</body>
</html>


luzhaopeng19940312
关注
专栏目录
html5图片破碎效果,HTML5 Canvas点击屏幕碎裂交互动画特效
weixin_32459553的博客
06-03 791
JavaScript语言：JaveScriptBabelCoffeeScript确定function Chip(id, x, y) {this.id = id;this.x = x;this.y = y;this.cracks = [];this.cracksLength;this.interCracks = [];this.interCracksLength = Math.floor(Math....
js 图片打碎_一款html5 canvas实现的图片玻璃碎片特效
weixin_39767645的博客
12-30 283
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效。图片以玻璃碎片的形式出现到界面中，然后似玻璃被打碎的效果渐消息。效果图如下：源码下载html代码：复制代码代码如下: js代码：复制代码代码如下:// canvas settingsvar imageWidth = 768,imageHeight = 485;var vertices = [],indices,boxes = [...
js撕裂效果特效
04-09
网页右上角撕裂效果,非常炫酷的js特效.完美应用与你目前的页面
JavaScript+html5 canvas实现图片破碎重组动画特效
10-22
主要介绍了JavaScript+html5 canvas实现破碎重组的视频特效，感兴趣的小伙伴们可以参考一下
php合成视频特效,HTML5 Canvas 破碎重组的视频特效代码具体介绍
weixin_42401025的博客
03-29 135
也许你见过HTML5图片破碎动画特效，实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组，这个HTML5动画就是利用Canvas的相关特性，实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标，即可让该区域的视频破碎，让后经过一段时间后，破碎的区域又可以重组还原，视觉效果非常棒。在线演示源码下载HTML代码Click video to blow it up!JavaScript代码var...
图片破碎HTML5js特效
ICode联盟
08-11 327
图片破碎HTML5特效，基于Canvas实现的图片破碎动画效果。
js 图片打碎_JavaScript+html5 canvas实现图片破碎重组动画特效_javascript技巧
weixin_42282482的博客
12-30 741
也许你见过HTML5图片破碎动画特效，实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组，这个HTML5动画就是利用Canvas的相关特性，实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标，即可让该区域的视频破碎，让后经过一段时间后，破碎的区域又可以重组还原，视觉效果非常棒。HTML代码Click video to blow it up!JavaScript代码var video;v...
js 图片打碎_JavaScript+html5 canvas实现图片破碎重组动画特效
weixin_33736210的博客
12-30 517
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(){...
在After Effects中制作动画粒子效果
# 章节一：介绍After Effects软件及动画粒子效果的应用领域 ## 1.1 After Effects软件概述 Adobe After Effects是一款专业的视频剪辑和特效制作软件，广泛应用于影视后期制作、广告制作、动画制作等领域。通过...
【小程序动画合集】10种小程序动画效果实现方法，文章太长建议收藏！
Dreawer微信小程序联盟
06-25 2万+
前言 一提小程序与动画，首先想到的是什么？嗯，微信小程序独创了一套动画玩法，官方支持3种动画方案，分别是createAnimation、this.animate和CSS3动画。 1.createAnimation与Animation 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 var animation = wx.createAnimation({ transformOrig...
html5 canvas打碎的图片玻璃碎片特效
11-24
html5 canvas打碎的图片玻璃碎片特效
index.html
04-20
前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能前端页面的一些代码，个人水平有限，只能
HTML5 canvas绘图制作打击视频玻璃破碎动画效果
06-06 2141
HTML5 canvas绘图制作打击视频玻璃破碎动画效果     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
使用threejs+tweenjs实现图片炸裂效果
srk19960903的博客
10-10 7613
在之前使用threejs实现了点云的效果，后来想了一下还可以通过着色器修改一块板子上每个点的位置实现一些特殊的效果，比如让一个板子炸开~之前点云中点的运动轨迹都是自己计算出来的，后来发现tweenjs这个工具很好用，于是就应用到了这个项目中。 　　介绍项目之前，先理一理实现炸裂效果的思路        1.创建一个PlaneBufferGeometry对象方便对顶点进行处理，创建一个Shade
碎裂效果尝试(canvas篇)
weixin_30417487的博客
05-26 338
为什么会有这篇博文，因为昨天我的杯子碎了，同个办公室的人手机屏幕碎了……碎碎平安 既然说的是碎裂效果，那什么是碎裂呢，看看生活中的 总而言之就是完整的一块，碎成了好些块。 进入正题，canvas对于图像处理很强，毕竟直接操作像素，马赛克，翻转，二值化都很方便。但是经过我的一番尝试，说实话，canvas分割图像这方面还真挺麻烦的…… 当然可能我的实现思路有问题，绕了弯，如果有更好地方法请...
ThreeJS：图像波动及破碎消失效果shader中的应用
最新发布
ufrontend的博客
04-16 1264
Value Noise是最简单的噪声算法，其主要思路是定义若干顶点且每个顶点含有一个随机值，这些顶点会根据自己的随机值对周围坐标产生影响，越靠近顶点则越容易受该顶点影响。当需求某个坐标的输出值是，需要将该坐标附近的各个顶点所造成的影响值进行叠加，从而得到一个总值并输出。
jQuery方块破碎散落js特效
ICode联盟
04-13 207
下载地址 效果很酷的jQuery散落动画，它是一款jQuery 3D方块散落动画，首先在一张3D的桌面上放置着随机大小的方块，然后每一个方块都会定时散落下去，最后又会自动补齐方块，周而复始的循环，3D动画非常炫酷。 dd: ...
canvas实现视频播放，带炸裂特效
热门推荐
q1424966670的博客
01-09 3万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;HTML5 Video Destruction&lt;/title&gt;
一款基于javascript的3D玻璃破碎特效
weixin_34387284的博客
09-30 637
之前为大家介绍了一款 html5 canvas实现图片玻璃碎片特效。今天要给大家带来一款基于javascript的3D玻璃破碎特效。效果图如下： 在线预览   源码下载 html代码： &lt;div id="container"&gt; &lt;div id="fragment"&gt; &lt;/div&gt; &lt;/div&gt...
HTML5生日祝福网页模板：粉色HTML+CSS+JavaScript代码
这个模板使用了HTML5、CSS3和JavaScript技术，以粉色为主题，设计了一个充满活力的生日快乐网页。网页包含多个页面，采用DIV+CSS布局，顶部导航和底部区域具有全宽背景色。网页还集成了JavaScript功能，可能包括视频...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值