Canvas图片合成的一个功能函数

平时项目中经常有用到几张图片和文字等合成一张目标分享图片的图片；经常会写一大串代码，各种嵌套回调，甚是耗时。
先封装了一个简单的功能函数，只需按规定格式传入，就能得到你想要的结果图，省心省时；

方法源码

// An highlighted block
function drawCanvas(data){
        var self=this;
            self.createEvent();
            self.canvas = document.createElement("canvas");
            self.canvas.width = data.canvas.w;
            self.canvas.height = data.canvas.h;
            self.ctx = self.canvas.getContext("2d");
        if(data.canvas.fillStyle){
            self.ctx.fillStyle = data.canvas.fillStyle;
            self.ctx.fillRect(0,0,self.canvas.width,self.canvas.height);
        }
        if(data.list) {
            self.canvas.addEventListener('loaded',function(){
                self.startDraw(data.list);
                if(window.dispatchEvent) {
                    self.canvas.dispatchEvent(self.event_end);
                } else {
                    self.canvas.fireEvent(self.event_end);
                }
            });
            self.load(data.list);
            setTimeout(function() {
                self.dispatchEvent(self.canvas, self.event_start) ;
            },20);
        }
        return self.canvas;
    }
    drawCanvas.prototype.dispatchEvent = function(dom,event){
        if(window.dispatchEvent) {
            dom.dispatchEvent(event);
        } else {
            dom.fireEvent(event);
        }
    }
    drawCanvas.prototype.load = function(list){
        var self = this;
        // 清理出需要加载的元素
        var loadList = [];
        list.forEach(function(currentValue){
            if(currentValue.type=="img"){
                loadList.push(currentValue);
            }
        });
        // 加载元素
        var loaded = 0;
        loadList.forEach(function(currentValue){
            var img = new Image();
            img.src = currentValue.value;
            img.onload = function(){
                loaded++;
                if(loaded>=loadList.length){
                    self.canvas.dispatchEvent(self.event_loaded);
                }
            }
        });
    }
    drawCanvas.prototype.createEvent = function(){
        var self = this;
        self.event_loaded = new CustomEvent('loaded');
        self.event_start = new CustomEvent('start');
        self.event_end = new CustomEvent('end');
        self.event_playing = new CustomEvent('playing');
    }
    drawCanvas.prototype.startDraw = function(list){
        var self = this;
        list.forEach(function(currentValue){
            switch(currentValue.type){
                case "img":
                    self.drawImg(currentValue);
                    break;
                case "text":
                    self.drawText(currentValue);
                    break;
                case "canvas":
                    self.drawCanvas(currentValue);
                    break;
                case "video":
                    self.drawVideo(currentValue);
                    break;
            }
        })
    }
    drawCanvas.prototype.drawImg = function(item){
        var self = this;
        var img = new Image();
            img.src = item.value;
        var sx = (item.param && item.param.sx) || 0;
        var sy = (item.param && item.param.sy) || 0;
        var swidth = (item.param && item.param.swidth) || img.width;
        var sheight = (item.param && item.param.sheight) || img.height;
        var x = (item.param && item.param.x) || 0;
        var y = (item.param && item.param.y) || 0;
        var width = (item.param && item.param.width) || img.width;
        var height = (item.param && item.param.height) || img.height;
        self.ctx.globalCompositeOperation = item.globalCompositeOperation || "source-over";
        self.ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

    }
    drawCanvas.prototype.drawText = function(item){
        var self = this;
            self.ctx.font = (item.param && item.param.font);
            self.ctx.fillStyle = (item.param && item.param.fillStyle) || "black";
            self.ctx.textAlign = (item.param && item.param.textAlign) || "start";
            var x = (item.param && item.param.x) || 0;
            var y = (item.param && item.param.y) || 0;
            self.ctx.fillText(item.value,x,y);
    }
    drawCanvas.prototype.drawCanvas = function(item){
        var self = this;
        var sx = (item.param && item.param.sx) || 0;
        var sy = (item.param && item.param.sy) || 0;
        var swidth = (item.param && item.param.swidth) || item.value.width;
        var sheight = (item.param && item.param.sheight) || item.value.height;
        var x = (item.param && item.param.x) || 0;
        var y = (item.param && item.param.y) || 0;
        var width = (item.param && item.param.width) || item.value.width;
        var height = (item.param && item.param.height) || item.value.height;
        self.ctx.globalCompositeOperation = item.globalCompositeOperation || "source-over";
        self.ctx.drawImage(item.value,sx,sy,swidth,sheight,x,y,width,height);
    }
    drawCanvas.prototype.drawVideo = function(item){
        var self = this;
        var sx = (item.param && item.param.sx) || 0;
        var sy = (item.param && item.param.sy) || 0;
        var swidth = (item.param && item.param.swidth) || item.value.width;
        var sheight = (item.param && item.param.sheight) || item.value.height;
        var x = (item.param && item.param.x) || 0;
        var y = (item.param && item.param.y) || 0;
        var width = (item.param && item.param.width) || item.value.width;
        var height = (item.param && item.param.height) || item.value.height;
        self.ctx.globalCompositeOperation = item.globalCompositeOperation || "source-over";
        console.log(item.value.paused);
        self.ctx.drawImage(item.value,sx,sy,swidth,sheight,x,y,width,height);
        function videoFrame(){
            if(!item.value.paused){
                self.ctx.drawImage(item.value,sx,sy,swidth,sheight,x,y,width,height);
                self.canvas.dispatchEvent(self.event_playing);
            }
            window.requestAnimationFrame(videoFrame);
        }
        window.requestAnimationFrame(videoFrame);
    }

传入数据格式

基本和原生的canvas传参类似

// An highlighted block
var drawData = {
        canvas:{
            w:644,
            h:929,
            fillStyle:'white'
        },
        list:[
            {type:"text",value:"test text",param:{
                font:"40px Georgia",
                fillStyle:"red",
                textAlign:"center",
                x:10,
                y:360
            }},
            {type:"img",value:"images/pic2.png",param:{
                sx:10,
                sy:10,
                swidth:614,
                sheight:168,
                x:20,
                y:10,
                width:614,
                height:168
            }},
            {type:"canvas",value:document.getElementById("demoCanvas"),param:{
                sx:0,
                sy:0,
                swidth:748,
                sheight:504,
                x:0,
                y:0,
                width:400,
                height:270
            }},
            {type:"video",value:document.getElementById("demoVideo"),param:{
                sx:0,
                sy:0,
                swidth:748,
                sheight:504,
                x:20,
                y:40,
                width:400,
                height:270
            }}
        ]
    }

param: 非必要参数；

如何调用

// An highlighted block
var _canvas = new drawCanvas(drawData);

    _canvas.addEventListener('start',function(e){
        // 监听元素开始绘制
        ///document.getElementById("ttCanvas").appendChild(_canvas);
    })
    _canvas.addEventListener('loaded',function(e){
        // 监听元素加载完成
    })
    _canvas.addEventListener('end',function(e){
    	// 监听绘制完成
        ///var data = _canvas.toDataURL("image/png");
        ///document.getElementById("imgBox").src = data;
    })

    _canvas.addEventListener('playing',function(e){
        // 监听视频播放期间的绘制
    })