澳门新浦京手机版HTML5 Canvas 破碎重组的视频特效

本文由码农网 –
小峰原创,转发请看清文末的转载要求,招待到场大家的付费投稿安排!

1、HTML5摄像破碎重新组合特效,强盛视觉冲击

依照HTML5的使用今后早就十一分广阔,即日咱们就来向我们大吃大喝20款特别灿烂的HTML5/CSS3应用插件。希望我们爱不释手并分享给您的知音们。

兴许你见过HTML5图纸破碎动漫特效,落成的规律也挺轻松的。但是你应当未有见过录制也足以破碎重新整合,这些HTML5动漫片正是使用Canvas的相关脾气,落成了点击鼠标让摄像破碎重新组合的功力。在录制区域点击鼠标,就能够让该区域的摄像破碎,让后通过后生可畏段时间后,破碎的区域又能够整合还原,视觉效果十分棒。

HTML5录像播放器超级多,不过HTML5摄像特效依然少之甚少见的,那款HTML5录像破碎重新整合特效特别振作激昂,给人强盛的视觉冲击。点击录像任性地点,HTML5将会将那些区域击碎,过风流倜傥段时间,这么些被击碎的录制碎片又将自动重组。是生机勃勃款特不错的HTML5摄像特效。

1、HTML5摄像破碎重新整合特效
强大视觉冲击

澳门新浦京手机版 1

澳门新浦京手机版 2

HTML5录制播放器非常多,但是HTML5录像特效如故少之甚少见的,那款HTML5录制破碎重新整合特效极其振作激昂,给人强大的视觉冲击。点击录制任性地方,HTML5将会将这几个区域击碎,过风流倜傥段时间,那么些被击碎的视频碎片又将电动重组。是风姿洒脱款非常科学的HTML5录制特效。

在线演示源码下载

在线演示

澳门新浦京手机版 2

HTML代码

<div style="display:none">
        <video id="sourcevid" autoplay="true" loop="true">
            <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
            <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>
        </video>
        <canvas id="sourcecopy" width="640" height="360"></canvas>
</div>
<div>
<center>
    <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>
    <canvas id="output" width="1000" height="600" onmousedown="dropBomb(event, this)" style="border: 0 none">        </canvas>
</center>
</div>

源码下载

在线演示  
 /  
 源码下载

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>

在线演示源码下载

2、HTML5 3D Google寻觅,小盒子大世界

2、HTML5 3D Google搜索 小盒子
大世界

HTML5当成能令人想象万千,居然动起了谷歌(GoogleState of Qatar搜索的主心骨,它使用HTML5才干将Google寻觅放到了一个小盒子里,弄起了3D寻找。随着鼠标移动,HTML5
3D搜索盒子也就转动,极度立体。点击找出开关,即可张开盒子举行谷歌搜索。

HTML5正是能令人想象万千,居然动起了Google找出的主张,它利用HTML5技巧将Google找出放到了三个小盒子里,弄起了3D找寻。随着鼠标移动,HTML5
3D搜索盒子也就转动,特别立体。点击找出按键,就可以张开盒子实行Google找寻。

澳门新浦京手机版 4

澳门新浦京手机版 4

在线演示

在线演示  
 /  
 源码下载

源码下载

3、CSS3/jQuery创意盒子动漫菜单

3、CSS3/jQuery创新意识盒子动漫菜单

用作前端开辟者,琳琅满指标jQuery菜单见过比较多,那款jQuery/CSS3菜单却是别具生机勃勃格,菜单项嵌入到九宫格中,像小盒子同样,加上自身的背景,菜单全体外观极其使人迷恋。点击菜单项,盒子就能够开展,显示该菜单项具体的源委。该CSS3菜单在张开时也是有不利的动漫片效果。

澳门新浦京手机版 ,用作前端开辟者,多姿多彩标jQuery菜单见过无数,那款jQuery/CSS3菜单却是别具大器晚成格,菜单项嵌入到九宫格中,像小盒子雷同,加上自个儿的背景,菜单全部外观特别使人陶醉。点击菜单项,盒子就博览会开,呈现该菜单项具体的剧情。该CSS3菜单在进展时也是有科学的卡通效果。

澳门新浦京手机版 6

澳门新浦京手机版 6

在线演示  
 /  
 源码下载

在线演示

4、豪华的HTML5图表
可兆示实时数据

源码下载

HTML5在图片应用中也卓殊广大,比起早先的网页图表,HTML5图片制作更方便,成效越来越强盛。那款HTML5图纸插件外观特别华侈和正规,在数码体现地点也很有优势,图表不只有扶助多维数据展现,並且扶植区域采取数据作用,利用该HTML5图形能够进一层有利地保管你的数目。

4、华丽的HTML5图形,可显示实时数据

澳门新浦京手机版 8

HTML5在图片应用中也十分宽广,比起此前的网页图表,HTML5图纸制作更轻松,功用更加强有力。那款HTML5图片插件外观非常华丽和正式,在数码显示方面也很有优势,图表不唯有帮忙多维数据浮现,而且帮忙区域选择数据功能,利用该HTML5图纸能够更进一竿有益于地管理你的数据。

在线演示    /
 
 源码下载

澳门新浦京手机版 8

5、HTML5重力感应游戏
甩甩领导的头像

在线演示

快过大年了,工资没涨多少啊,年底奖没发啊,恨领导吗。以后应用那款HTML5重力感应游戏来尽情甩领导的头像吧。制作一些你埋怨的企管者们的头像图片,利用该HTML5引力感应游戏插件来拖动鼠标甩动这个头像,叫你不加薪酬…叫您不加报酬…

源码下载

澳门新浦京手机版 10

5、HTML5重力影响游戏,甩甩领导的头像

在线演示    /
 
 源码下载

快过大年了,薪酬没涨多少啊,年终奖没发呢,恨领导吗。今后应用那款HTML5引力感应游戏来尽情甩领导的头像吧。制作一些你仇恨的长官们的头像图片,利用该HTML5引力感应游戏插件来拖动鼠标甩动这几个头像,叫你不加薪资…叫您不加薪给…

6、HTML5
3D立体图形旋转播放体现

澳门新浦京手机版 10

自打HTML5技术的面世,我们能够在浏览器上看见越来越多的3D特效。那款HTML5
3D立体图形旋转播放体现工具就显示了精锐的HTML5
3D功效。当然那亟需扶植HTML5 3D作用的浏览器技能收看那一个3D图片演示。

在线演示

澳门新浦京手机版 12

源码下载

在线演示    /
 
 源码下载

6、HTML5 3D立体图形旋转播放显示

7、HTML5中华夏儿女民共和国象棋游戏
自定义象棋难度

从今HTML5技能的现身,大家能够在浏览器上看出越来越多的3D特效。那款HTML5
3D立体图形旋转播放展现工具就反映了有力的HTML5
3D作用。当然那须要协助HTML5 3D成效的浏览器本事见到那么些3D图片演示。

棋牌游戏在棋类游戏中大器晚成度不行成熟,中华夏族民共和国象棋的本子也非常的多。明天那款基于HTML5本事的中黄炎子孙民共和国象棋游戏特别有风味,咱们不但能够筛选中夏族民共和国象棋的嬉戏难度,并且能够切换棋盘的样式。程序写累了,喝上生龙活虎杯咖啡,和计算机博弈几把吧,相信那HTML5中国象棋游戏的贯彻算法你相比较清楚,能够展开源码来探究一下那款HTML5中华夏族民共和国象棋游戏。

澳门新浦京手机版 12

澳门新浦京手机版 14

在线演示

在线演示    /
 
 源码下载

源码下载

8、HTML5播放器传说卡式磁带式古典播放器

7、HTML5中夏族民共和国象棋游戏,自定义象棋难度

那是风流洒脱款样式特别古典,但又是十分时髦的HTML5播放器,说它是古典播放器,是因为这种卡式磁带式的HTML5播放器比较古老,说它时髦,是因为后日的HTML5播放器很稀有这种体制的,非常常有新意。倘让你想给你的私家重大加多意气风发款天性化的播放器,那么那款HTML5卡式磁带式古典播放器能够筛选一下,个人感到那是HTML5播放器的遗闻,极度精粹。

棋牌游戏在棋类游戏中已经特别成熟,中黄炎子孙民共和国象棋的本子也不行多。明日那款基于HTML5技能的中黄炎子孙民共和国象棋游戏特别常有特点,我们不只能够选拔中夏族民共和国象棋的玩乐难度,并且可以切换棋盘的体制。程序写累了,喝上后生可畏杯咖啡,和Computer博弈几把吧,相信那HTML5中中原人民共和国象棋游戏的兑现算法你相比清楚,能够展开源码来斟酌一下那款HTML5中黄炎子孙民共和国象棋游戏。

澳门新浦京手机版 15

澳门新浦京手机版 14

在线演示  
 /    源码下载

在线演示

9、HTML5特级Mary游戏重体验
HTML5游玩优秀

源码下载

还记得儿时同盟玩过的一级Mary音乐游戏吗?是的,那是我们时辰候非常红的朝气蓬勃款游戏,后日老外利用HTML5技巧让一级Mary能够在网页上跑了,HTML5版的一级Mary即使未有原版的功效强大,不过即使您风野趣,完全可以把它写完备了。HTML5真的很刚劲,HTML5游玩方面越来越尖锐。

8、HTML5播放器传说,卡式磁带式古典播放器

澳门新浦京手机版 17

那是风流倜傥款样式非常古典,但又是老大前卫的HTML5播放器,说它是古典播放器,是因为这种卡式磁带式的HTML5播放器相比古老,说它时髦,是因为前些天的HTML5播放器超少有这种体制的,特别常有新意。要是你想给你的民用重大加多黄金时代款特性化的播放器,那么那款HTML5卡式磁带式古典播放器能够接纳一下,个人以为这是HTML5播放器的传说,非常精华。

在线演示    /
   源码下载

澳门新浦京手机版 15

10、浪漫技师HTML5爱心招亲动漫

在线演示

我们程序员在追提亲情方面也是相当性感的,下边是一位同学利用和谐所学的HTML5文化自制的HTML5爱心提亲动漫,画面特别和谐甜蜜,那样的创新意识十分轻便打动女孩,借让你是独立的技术员,也快捷来创设本身的菩萨心肠提亲动漫吗。

源码下载

澳门新浦京手机版 19

9、HTML5精品玛丽游戏重体验,HTML5娱乐精髓

在线演示    /
 
 源码下载

还记得小时候伙同玩过的一级Mary体育类游戏吗?是的,那是大家时辰候非常的红的后生可畏款游戏,明日老外利用HTML5本领让一级Mary能够在网页上跑了,HTML5版的一级Mary虽然还未原版的作用强大,可是倘让你有意思味,完全能够把它写康健了。HTML5真的很苍劲,HTML5戏耍方面更加尖锐。

11、CSS3密码强度验证表单
码速表样式

澳门新浦京手机版 17

我们在网址上注册会员时,输入二个苍劲相当的大的密码会大大扩张帐号安全性,那么什么样的密码才比较安全啊?那款CSS3密码强度验证表单插件能够唤起您如今输入密码的安全等级,风趣的是该密码强度验证插件的体裁相近码速表,随着密码强度的加大,码速表指针就能够顺时针旋转,当然旋转的特效是利用CSS3构成jQuery实现的。

在线演示

澳门新浦京手机版 21

源码下载

在线演示    /  
 源码下载

10、浪漫技师 HTML5爱心求婚动漫

12、纯CSS3 Android Logo动漫绘制
小手还有也许会动

咱俩工程师在追表白情方面也是不行浪漫的,上边是三个HTML5友善表白动漫,画面拾分和气甜蜜,那样的新意十分轻巧打动女孩,假若您是单身的技士,也尽快来构建本身的仁义招亲动漫吗。

利用CSS3足以绘制非常多头眼昏花的图腾Logo,今日就采取纯CSS3完成Android
Logo图标,该CSS3 Android
Logo首要行使了CSS3中的圆角等质量,绘制出来的Logo极度逼真,同期该Android
Logo还会有动漫效果,鼠标滑过Android小人的头和手时,小手还是能够够摆荡。

澳门新浦京手机版 19

澳门新浦京手机版 23

在线演示

在线演示    /  
 源码下载

源码下载

13、纯CSS3发光登入表单

正文固定链接: 

我们见过无数CSS3表单,制作都极度美好,后日介绍的那款CSS3表单不但外观华丽,并且伴有颜色发光动漫。当鼠标激活表单时,表单周边就能够冒出颜色渐变的发光动漫,同盟黑褐的背景,整个CSS3表单显得非常艳丽。更要紧的是,这些CSS3发光表单基本用CSS3落到实处,超少的JS代码,在CSS3引擎上优化非常刚烈。

澳门新浦京手机版 24

在线演示    /  
 源码下载

14、CSS3 3D进度条按键18款能够样式

我们在网页上交给数据的时候时有的时候会看见进程条,但是多数过程条都以在网页其余地点显得,举例弹出一个窗口。那款CSS3兑现的进程条是体现在开关上的,能够越来越直观的反映出客商提交的速度意况,该CSS3进程条开关样式极其卓越,在协理3D的浏览器上还是能够有3D立体的功用,何况进程条展现情势比非常多,生龙活虎共18种体裁。

澳门新浦京手机版 25

在线演示    /
 
 源码下载

15、HTML5水波荡漾动漫特效
特别逼真

在现实生活中,我们平日能够见到水波的功效,雨水落到小河中,河里必定泛起了水波。明天我们用HTML5仿照了水波荡漾效果,点击河水的图形,就能够从点击处最初泛起水波,并向远处伸展。这几个动用HTML5模拟出来的水波效果拾贰分逼真,但是有个别耗CPU。

澳门新浦京手机版 26

在线演示  
 /  
 源码下载

16、HTML5雨点下降动画让雨点飞起来

利用HTML5得以完结雨点下降要求专一一下几点:1、雨点的轻重和形态;2、雨点下跌的进度决定,注意相应是加速下降。这一个演示动漫就很生动的模拟了雨点下降动漫。当鼠标移上去时,就能够形成3个雨点并向下掉落。HTML5本事确实特别有益。

澳门新浦京手机版 27

在线演示    /  
 源码下载

17、HTML5吃豆人游戏PCMAN

即日又要介绍豆蔻梢头款不错的HTML5游乐,HTML5吃豆人游戏,画面上有三个吃豆人和一批怪物,你必要调整吃豆人活动吃掉路上的小豆子,风流罗曼蒂克旦吃豆人遇到怪物被吃掉的时候,你就GAME
OVE中华V了。那款HTML5嬉戏还会有某个没到家,便是吃豆人遇上怪物的时候不能够被怪物吃掉,风乐趣的同窗能够继续把它周到。HTML5游乐开垦不止需求技艺,也须求创新意识。

澳门新浦京手机版 28

在线演示    /
   源码下载

18、HTML5像素破裂图片动漫图片洒落意气风发地

那款HTML5图片动漫特效你相对意想不到,它将一张图片破裂成多数像素颗粒,点击图片后,这一个像素颗粒边掉落在地上,继续点击,打碎的像素图片颗粒又会重新整合成完全的图样。用HTML5技巧达成这种图片打碎效果依旧挺轻便的,风乐趣的同校能够下载源码来学学。

澳门新浦京手机版 29

在线演示  
 /  
 源码下载

19、HTML5太空战机游戏
维妙维肖

那又是意气风发款制作精美的HTML5戏耍,该HTML5戏耍的主演是黄金年代架英勇威武的太空战机,进入娱乐后按”Z”键发射子弹,排除敌机。该HTML5战机游戏的特点是:1、游戏画面十一分奢侈逼真,况且参加声音元素,让游戏越发动人;2、游戏成分超级多,敌机类型和发射子弹类型也超多,让游戏发烧友不会干瘪。

澳门新浦京手机版 30

在线演示    /  
 源码下载

20、HTML5动画图片播放器
高档大气

大家见过超多图形播放插件(主题图),超级多都依据jQuery。明日牵线的HTML5图纸播放器很特殊,它不但在图片间切换有连接动漫效果,并且在切换时图片中的成分也将现出动漫效果,比如图中的文字移动、打垮、重组等。那款HTML5动漫图片播放器算得上是高等大气上等级次序。

澳门新浦京手机版 31

在线演示    /  
 源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注