使用Canvas和精灵图制作的电影背景动效

Canvas Video with Sprite image and svg Color Multiply 寓意默默耕耘。 2016年度Canvas候选作品。

canvas, video

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2796
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    background: #ebcba2;
}
.vid-wrap {
    width: 600px;
    height: 600px;
    max-width: 100vmin;
    max-height: 100vmin;
    position: relative;
}
.ampercover {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    fill: #ebcba2;
}
.vid-cir {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}
.vid {
    position: absolute;
}
.vid-poster {
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
}
.vid,
.vid canvas {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background: transparent;
}
.vid canvas {
    -webkit-animation: show 0.1s;
    animation: show 0.1s;
}
@-webkit-keyframes show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
a {
    outline: 0;
}
.amptitle {
    font-size: 26px;
}

HTML

if (!el) {
                    return console.warn('Error. No element found for selector', _opts.selector);
                }

if (!_opts.videos) {
                    return console.warn('Error. You need to define at least one video object');
                }

if (hasCanvas()) {
                    loadImages(_opts.videos, function(err, images) {
                        if (err) return console.warn('Error while loading video sources.', err);

var ctx = initCanvas(),
                            requestAnimationFrame = reqAnimFrame();

control.play = function(key, reverse, fps) {
                            if (control.pause) control.pause(); // pause current vid

var img = images[key],
                                opts = _opts.videos[key],
                                frameWidth = img.width / opts.cols,
                                frameHeight = img.height / Math.ceil(opts.frames / opts.cols);

var curFps = fps || opts.fps || 15,
                                curFrame = reverse ? opts.frames - 1 : 0,
                                wait = 0,
                                playing = true,
                                loops = 0,
                                delay = 60 / curFps;

requestAnimationFrame(frame);

control.resume = function() {
                                playing = true;
                                requestAnimationFrame(frame);
                            };

control.pause = function() {
                                playing = false;
                                requestAnimationFrame(frame);
                            };

control.isPlaying = function() {
                                return playing;
                            };

control.destroy = function() {
                                control.pause();
                                removeCanvid();
                            };

control.getCurrentFrame = function() {
                                return curFrame;
                            };

control.setCurrentFrame = function(frameNumber) {
                                if (frameNumber < 0 || frameNumber >= opts.frames) {
                                    return false;
                                }

if (!control.isPlaying()) {
                                    drawFrame(frameNumber);
                                }

curFrame = frameNumber;
                            };

if (firstPlay) {
                                firstPlay = false;
                                hideChildren();
                            }

function drawFrame(f) {
                                var fx = Math.floor(f % opts.cols) * frameWidth,
                                    fy = Math.floor(f / opts.cols) * frameHeight;

ctx.clearRect(0, 0, _opts.width, _opts.height); // clear frame
                                ctx.drawImage(img, fx, fy, frameWidth, frameHeight, 0, 0, _opts.width, _opts.height);
                                if (typeof _opts.colorize === 'string') {
                                    ctx.globalCompositeOperation = "multiply";
                                    ctx.fillStyle = _opts.colorize;
                                    ctx.fillRect(0, 0, _opts.width, _opts.height);
                                }
                            }
                        }; // end control.play
                        if (isFunction(_opts.loaded)) {
                            _opts.loaded(control);
                        }
                    }); // end loadImages
                } else if (opts.srcGif) {
                    var fallbackImage = new Image();
                    fallbackImage.src = opts.srcGif;

el.appendChild(fallbackImage);
                }

function loadImages(imageList, callback) {
                    var images = {},
                        imagesToLoad = Object.keys(imageList).length;

if (imagesToLoad === 0) {
                        return callback('You need to define at least one video object.');
                    }

for (var key in imageList) {
                        images[key] = new Image();
                        images[key].onload = checkCallback;
                        images[key].onerror = callback;
                        images[key].src = imageList[key].src;
                    }

function checkCallback() {
                        imagesToLoad--;
                        if (imagesToLoad === 0) {
                            callback(null, images);
                        }
                    }
                }

function initCanvas() {
                    var canvas = document.createElement('canvas');
                    canvas.width = _opts.width;
                    canvas.height = _opts.height;
                    canvas.classList.add('canvid');

el.appendChild(canvas);

return canvas.getContext('2d');
                }

function hideChildren() {
                    [].forEach.call(el.children, function(child) {
                        if (!child.classList.contains('canvid')) {
                            child.style.display = 'none';
                        }
                    });
                }

function removeCanvid() {
                    [].forEach.call(el.children, function(child) {
                        if (child.classList.contains('canvid')) {
                            el.removeChild(child);
                        }
                    });
                }

function reqAnimFrame() {
                    return window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||

function(callback) {
                            return setTimeout(callback, 1000 / 60);
                        };
                }

function hasCanvas() {
                    // taken from Modernizr
                    var elem = document.createElement('canvas');
                    return Boolean(elem.getContext && elem.getContext('2d'));
                }

function isFunction(obj) {
                    // taken from jQuery
                    return typeof obj === 'function' || !!(obj && obj.constructor && obj.call && obj.apply);
                }

function merge() {
                    var obj = {},
                        key;

for (var i = 0; i < arguments.length; i++) {
                        for (key in arguments[i]) {
                            if (arguments[i].hasOwnProperty(key)) {
                                obj[key] = arguments[i][key];
                            }
                        }
                    }
                    return obj;
                }

return control;
            } // end canvid function

return canvid;
    })); // end factory function
</script>

Canvas Video with Sprite image and svg Color Multiply 寓意默默耕耘。 2016年度Canvas候选作品。

canvas, video

编辑器支持Emmet

快捷键

Canvas Video with Sprite image and svg Color Multiply 寓意默默耕耘。 2016年度Canvas候选作品。

canvas, video

使用HTML5 Canvas制作超炫动态电子艺术画作（风景画）

使用Canvas制作闪电动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：