canvas实现播放视频点击碎屏动画效果-html代码-BFW代码库

canvas实现播放视频点击碎屏动画效果

代码语言：html

所属分类：动画

代码描述：canvas实现播放视频点击碎屏动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>

    <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 {
            .........完整代码请登录后点击上方下载按钮下载查看