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