绘制图片

drawImage方法将所给图片绘制到canvas。

CanvasRenderingContext2D .drawImage(image, dx, dy)；
CanvasRenderingContext2D .drawImage(image, dx, dy, dw, dh)；
CanvasRenderingContext2D .drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)；

• image：图形数据，可以是图像数据也可以是img标签。
• sx：从图形x轴坐标x处截取
• sy：从图形y轴坐标y处截取
• sw: 截取图形的宽
• sh：截取图形的高
• dx：从目标canvas的x轴x处绘制
• dy：从目标canvas的y轴y处绘制
• dw: 绘制的宽
• dh：绘制的高

在todataurl一节中我们为GridFunny添加了一个toDataURL的方法，将canvas直接转换为图形数据， 本节中的示例，使用这个被转换的数据，并将其重新绘制到另一个canvas中：

// 为GridFunny添加一个clone方法
GridFunny.prototype.clone = function(options, callback) {
    if (!this._started) this.start();
    var self = this,
        width = 300,
        height = 300,
        destGridW = this._canvasRatio("width", options.width || width) * this.pixelX,
        destGridH = this._canvasRatio("height", options.height || height) * this.pixelY,
        _opts = this._extendObject({
            type: "image/png",
            opts: {},
            width: width,
            height: height,
            sx: this.pixelX,
            sy: this.pixelY,
            sw: options.gridNum ? options.gridNum * this.pixelX : this.settings.canvasSize.width - this.pixelX * 2,
            sh: options.gridNum ? options.gridNum * this.pixelY : this.settings.canvasSize.height - this.pixelY * 2,
            dx: destGridW,
            dy: destGridH,
            dw: (options.width || width) - (destGridW * 2),
            dh: (options.width || width) - (destGridH * 2)
        }, options || {});
    this.toDataURL(_opts.type, _opts.opts, function(canvas, data) {
        var image = new Image();
        image.src = data;
        image.onload = function() {
            var _canvas = self._initCanvas(_opts.width, _opts.height),
                ctx = _canvas.getContext('2d');
            ctx.drawImage(image, _opts.sx, _opts.sy, _opts.sw, _opts.sh, _opts.dx, _opts.dy, _opts.dw, _opts.dh)
            callback(_canvas);
        };
    })；
}
// 调用
// 剪切三个格子
grid.clone({
    gridNum: 3，
    width: 300,
    height: 300
}, function(canvas) {
    grid.settings.container.appendChild(canvas);
});

// 全部复制
grid.clone({
    width: 300,
    height: 300
}, function(canvas) {
    grid.settings.container.appendChild(canvas);
});

clone参数：

• gridNum：剪切的格子数，没有则为全部
• width：复制后canvas的宽
• height：复制和canvas的高
• (s|d)(x,y,w,h)：默认不传，则根据gridNum自动计算，有传值则根据所传值处理图片

代码的执行效果如下：