使用canvas实现画中画效果的H5

最近看到一个挺有趣的H5，主要效果就是通过不断的放缩来展示画中画，网上找了一下并没有这方面的实现代码，故决定原创一下，并分享出来

主要的思路就是通过canvas不断的写入图片，考虑到每一层的图片的位置和大小不一样，于是通过最外层的图片来尺寸和位置来控制里面的图片，然后通过循环写入canvas的方式实现最终的效果。

需要注意的是使用canvas写入图片需要预加载图片，通过回调函数来写入，同时，由于图片加载需要一定的时候，所以一般的H5会有一个加载的过程，我也加上了一个回调函数来处理加载图片以后其他的操作，比如隐藏加载页面等操作。

此项目已经放到码云上了，传送门,第一次分享项目，共勉之。

主要代码如下：

let $ = require('jquery');
let tools = require('./utils.js');
$.fn.longPress = function() {
    let timeout = undefined;
    let start;
    let beginHandel, endHandel;
    let length = arguments.length;
    beginHandel = arguments[0];
    if (length = 2) {
        endHandel = arguments[1];
    }
    $(this).on('touchstart', function(e) {
        e.preventDefault();
        timeout = setTimeout(beginHandel, 500);
    });
    $(this).on('touchend', function(e) {
        e.preventDefault();
        tools.execCB(endHandel);
        clearTimeout(timeout);
    });
};
let TWEEN = require('@tweenjs/tween.js');
(function(global, factory) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return factory(global, global.document);
        })
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(global, global.document);
    } else {
        global.Pip = factory(global, global.document);
    }
}(typeof window !== 'undefined' ? window : this, function(window, document) {

    'use strict'
    //常量
    const CW = $(window).width();
    const CH = $(window).height();
    let container = $('#pip');

    let Pip = function(options) {
        let _this = this;
        this.defaultOps = {
            model: 'bts',
            duration: 1000,
        }
        if (typeof options == 'object') {
            Object.keys(options).map(function(key) {
                _this.defaultOps[key] = options[key];
            })
        }
        //创建canvas
        let canvas = document.createElement('canvas');
        let length = _this.defaultOps.content.length;
        canvas.width = CW;
        canvas.height = CH;
        _this.defaultOps.context = canvas.getContext('2d');
        container.append(canvas);

    };
    Pip.prototype.start = function(cb) {
        let opts = this.defaultOps;
        let ctx = opts.context;
        let content = opts.content;
        let length = content.length;
        let model = opts.model;
        let beginStatus = {};
        let endStatus = {};
        let i = 0;

        if (ctx) {
            // 加载所有的图片
            loadimages(content, function(images) {
                //去掉加载提示页面
                tools.execCB(cb)

                // 总时间
                let duration = opts.duration;
                let timestamp1 = 0
                let timestamp2 = 0

                // 补间动画
                let tween = null
                // 初始化状态
                if (model == 'stb') {
                    i = length - 2;
                    let width = CW;
                    let height = CH;
                    let left = 0;
                    let top = 0;

                    for (let k = i + 1; k >= 0; k--) {
                        if (k !== i + 1) {
                            left = left + width * content[length - 1 - k].left;
                            top = top + height * content[length - 1 - k].top;
                            width = width * content[length - 1 - k].width;
                            height = height * content[length - 1 - k].height;
                        }
                        let image = images[length - 1 - k];
                        ctx.drawImage(image, left, top, width, height);
                    }
                    //定义开始和结束状态
                    endStatus = {
                        width: CW / content[length - 1 - i].width,
                        height: CH / content[length - 1 - i].height,
                        left: -CW / content[length - 1 - i].width * content[length - 1 - i].left,
                        top: -CH / content[length - 1 - i].height * content[length - 1 - i].top
                    }
                    beginStatus = {
                        width: CW,
                        height: CH,
                        left: 0,
                        top: 0
                    }
                } else {
                    ctx.drawImage(images[length - 1 - i], 0, 0, container.width(), container.height());
                    //定义开始和结束状态
                    beginStatus = {
                        width: CW / content[length - 1 - i].width,
                        height: CH / content[length - 1 - i].height,
                        left: -CW / content[length - 1 - i].width * content[length - 1 - i].left,
                        top: -CH / content[length - 1 - i].height * content[length - 1 - i].top
                    }
                    endStatus = {
                        width: CW,
                        height: CH,
                        left: 0,
                        top: 0
                    }

                }

                function go() {
                    tween = new TWEEN.Tween(beginStatus)
                        .to(endStatus, duration)
                        .onUpdate(function() {
                            let _this = this;
                            ctx.clearRect(0, 0, container.width(), container.height());
                            let width = _this.width;
                            let height = _this.height;
                            let left = _this.left;
                            let top = _this.top;

                            for (let k = i + 1; k >= 0; k--) {
                                if (k !== i + 1) {
                                    left = left + width * content[length - 1 - k].left;
                                    top = top + height * content[length - 1 - k].top;
                                    width = width * content[length - 1 - k].width;
                                    height = height * content[length - 1 - k].height;
                                }
                                let image = images[length - 1 - k];
                                ctx.drawImage(image, left, top, width, height)
                            }
                        })
                        .onComplete(function() {
                            if (model == 'bts') {
                                i++;
                            } else {
                                i--;
                            }
                            if (i > length - 2 || i < 0) {
                                if (model == 'bts') {
                                    i--;
                                    model = 'stb';
                                    endStatus = {
                                        width: CW / content[length - 1 - i].width,
                                        height: CH / content[length - 1 - i].height,
                                        left: -CW / content[length - 1 - i].width * content[length - 1 - i].left,
                                        top: -CH / content[length - 1 - i].height * content[length - 1 - i].top
                                    };
                                    beginStatus = {
                                        width: CW,
                                        height: CH,
                                        left: 0,
                                        top: 0
                                    };
                                } else {
                                    i++;
                                    model = 'bts';
                                    beginStatus = {
                                        width: CW / content[length - 1 - i].width,
                                        height: CH / content[length - 1 - i].height,
                                        left: -CW / content[length - 1 - i].width * content[length - 1 - i].left,
                                        top: -CH / content[length - 1 - i].height * content[length - 1 - i].top
                                    };
                                    endStatus = {
                                        width: CW,
                                        height: CH,
                                        left: 0,
                                        top: 0
                                    };
                                }
                                return;
                            }
                            //定义开始和结束状态
                            if (model == 'bts') {
                                beginStatus = {
                                    width: CW / content[length - 1 - i].width,
                                    height: CH / content[length - 1 - i].height,
                                    left: -CW / content[length - 1 - i].width * content[length - 1 - i].left,
                                    top: -CH / content[length - 1 - i].height * content[length - 1 - i].top
                                };
                                endStatus = {
                                    width: CW,
                                    height: CH,
                                    left: 0,
                                    top: 0
                                };
                            } else {
                                endStatus = {
                                    width: CW / content[length - 1 - i].width,
                                    height: CH / content[length - 1 - i].height,
                                    left: -CW / content[length - 1 - i].width * content[length - 1 - i].left,
                                    top: -CH / content[length - 1 - i].height * content[length - 1 - i].top
                                };
                                beginStatus = {
                                    width: CW,
                                    height: CH,
                                    left: 0,
                                    top: 0
                                };

                            }

                            duration = opts.duration;
                            go();
                        })
                        .onStop(function() {
                            timestamp2 = new Date().getTime()
                            duration = duration - (timestamp2 - timestamp1)
                            if (duration < 0) {
                                duration = 0
                            }
                        })
                        .onStart(function() {
                            timestamp1 = new Date().getTime()
                        })
                        .start()

                    requestAnimationFrame(animate)

                    function animate() {
                        TWEEN.update()
                        requestAnimationFrame(animate)
                    }
                }

                container.longPress(function() {
                    go()
                }, function() {
                    if (tween) {
                        tween.stop()
                    }
                })
            })
        } else {
            console.log("context is not defined")
            return
        }

        function loadimages(content, cb) {
            let images = [];
            let num = 0;
            let length = content.length;
            for (let c in content) {
                images[c] = new Image();
                images[c].onload = function() {
                    if (num === length) {
                        num = 0;
                        tools.execCB(cb, images)
                    }
                }
                images[c].src = content[length - 1 - num].src;
                num++;
            }
        }
    };
    return Pip
}));

用法如下：

var pip = new Pip({
    content: [{
        src: require('../src/images/2.jpg'),
        top: 0,
        left: 0,
        width: 1,
        height: 1
    }, {
        src: require('../src/images/3.png'),
        top: .1,
        left: .05,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/4.jpg'),
        top: .4,
        left: .6,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/5.jpg'),
        top: .4,
        left: .6,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/6.jpg'),
        top: .9,
        left: .4,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/7.jpg'),
        top: .1,
        left: .05,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/8.jpg'),
        top: .4,
        left: .6,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/9.jpg'),
        top: .1,
        left: .05,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/4.jpg'),
        top: .4,
        left: .6,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/5.jpg'),
        top: .4,
        left: .6,
        width: .08,
        height: .08
    }, {
        src: require('../src/images/6.jpg'),
        top: .9,
        left: .4,
        width: .08,
        height: .08
    }],
    model: 'stb',
});
pip.start(function() {
    //此处加载完图片以后隐藏遮罩
    $('.mask').hide();
});