JavaScript+html5 canvas实现图片破碎重组动画特效_javascript技巧_脚本之家

本文由码农网 –
小峰原创,转发请看清文末的转发必要,迎接参与大家的付费投稿计划!

jQuery的图片滑块宗旨图插件收拾推荐,jquery主题

1.jQuery兑现的左臂选项卡主旨图片轮播动漫

jQuery达成的左边手选项卡核心图片轮播动漫特效源码,是一段清新摄人心魄的纽带图轮播代码,补助电动轮播与手动点击,是一段不错的规范图切换代码。

图片 1

在线演示

源码下载

2.jquery贯彻的网页缩略图大纲可滑动显示动态

query完毕的网页缩略图大纲可滑动显示动态特效源码,是一款具有网页大纲的缩略图彰显的代码,点击滑动缩略图就能够看出想要的事物,扶持鼠标点击、拖动及鼠标滚动切换显示。

图片 2

在线演示

源码下载

3.纯CSS3兑现的自定义美化UL OL列表的3种发光动画

那是我们事情发生前从没享受过的CSS3特效类型,它是一个能够自定义美化UL和OL列表的CSS3应用。当我们将鼠标滑过每多个列表项的时候都会现身一定的动漫特效,效果非常不利。这种列表美化样式一共有3种,发光效果最酷了。

图片 3

在线演示

源码下载

4.HTML5+SVG完结的线性图表特效源码

前天要享受的那款HTML5图形应用是一款线性图表,它主假诺有SVG布局出来的,那款SVG线性图表能够用不一样的水彩绘制出图表的数码区域。

图片 4

在线演示

源码下载

5.HTML5根据Canvas达成的火焰喷射动漫

几近年来咱们要来分享一款看似的HTML5动画作用,一款基于HTML5
Canvas火焰喷射动漫。用鼠标拖动一条直线,直线长度表示火焰喷射的力度,其余,火焰在移动中还足以反射效用啊。

图片 5

在线演示

源码下载

6.Jquery达成的手风琴选项卡点击垂直切换动态

Jquery完成的手风琴选项卡点击垂直切换动态特效源码,是一段可以达成垂直方向动态切换效果的手风琴选项切换代码,网页中使用此类代码能够让页面显示越发简明、清爽。

图片 6

在线演示

源码下载

7.jquery落到实处的匡帮手提式有线话机触屏滑动切换的选项卡切换

jquery达成的支撑手提式有线电话机触屏滑动切换的选项卡切换特效源码,是一段能够兑现手提式有线电话机触屏左右滑行切换效果的代码,当然在Computer上便是选取鼠标进行左右滑行,那类效果在手机中多用于各样手提式有线电话机帮手的列表内,要求此段代码的心上大家方可前来下载使用。

图片 7

在线演示

源码下载

8.jQuery动态变化订单进程步骤

那是一款基于jQuery完结的动态变化订单进程步骤代码,提取后台传输到页面包车型大巴数目,依据数据开展进程的更改。可在js脚本的o_status中安装初步值进行进程的转移。

图片 8

在线演示

源码下载

9.HTML5/CSS3自定义浮动Select 超炫下拉菜单

前几日我们要享受一款HTML5/CSS3悬浮的自定义Select下拉菜单,那几个CSS3菜单运用CSS3特性能够变动在网页上,并含有阴影效果,同临时间,张开下拉框时会以旋转方式弹出贰个二级菜单,菜单彰显漂浮挥舞的效果与利益。

图片 9

在线演示

源码下载

以上9种就是今天要推荐给大家的jQuery的图样滑块核心图插件,效果都充裕的棒,大家依照项目供给自由使用啊

1.jQuery落实的出手选项卡主旨图片轮播动画jQuery达成的侧面选项卡主旨图片轮播动画特效源…

只怕你见过HTML5图纸破碎动漫特效,完结的规律也挺轻易的。不过你应当未有见过摄像也得以破碎重新整合,那些HTML5动画就是使用Canvas的相干天性,完结了点击鼠标让录像破碎重新整合的功力。在录制区域点击鼠标,就能够让该区域的录制破碎,让后透过一段时间后,破碎的区域又能够整合还原,视觉效果比极棒。

兴许你见过HTML5图片破碎动漫特效,实现的原理也挺简单的。不过你应该没有见过摄像也得以破碎重新组合,这么些HTML5动画正是使用Canvas的相关性格,达成了点击鼠标让摄像破碎重新整合的成效。在摄像区域点击鼠标,就可以让该区域的录像破碎,让后透过一段时间后,破碎的区域又能够整合还原,视觉效果十分棒。

      Click video to blow it up!  

图片 10

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; copycanvas = document.getElementById; copy = copycanvas.getContext; var outputcanvas = document.getElementById; draw = outputcanvas.getContext; setInterval;}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{ 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; x+=TILE_WIDTH; } y+=TILE_HEIGHT; }}var RAD = Math.PI/180;var randomJump = false;var tiles = [];var debug = false;function processFrame(){ if(!isNaN{ 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 = false; video.currentTime = Math.random()*video.duration; } //loop if(video.currentTime == video.duration){ video.currentTime = 0; } } var debugStr = ""; //copy tiles copy.drawImage; draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height); for(var i=0; i= 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.2; if < 0.5){ tile.currentX = tile.originX; }else{ tile.currentX += diffx; } if < 0.5){ tile.currentY = tile.originY; }else{ tile.currentY += diffy; } if < 0.5){ tile.rotation = 0; }else{ tile.rotation += diffRot; } }else{ tile.force = 0; } draw.save(); draw.translate(tile.currentX, tile.currentY); draw.rotate; draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT); draw.restore{ debug = false; document.getElementById.innerHTML = debugStr; }}function explode{ for(var i=0; i

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程序设计具有扶植。

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>

在线演示源码下载

发表评论

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