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

网友评论0