仅将画布的一部分传输到新画布

Question

我有canvas id cnv。

<canvas id='cnv'></canvas>

黑色矩形是整个画布。我想创建另一个仅包含旧画布中的白色区域的画布。如何将画布的一部分转移到新画布？

 var cnv = document.getElementById('cnv');

我上面的代码中我不知道下一步该怎么做。

Answer 1

假设您在x，y，width和height中指定了区域，您可以执行以下操作：

function regionToCanvas(canvas, x, y, w, h) {

    var c = document.createElement("canvas"),       // create new canvas
        ctx = c.getContext("2d");                   // context for new canvas

    c.width = w;                                    // set size = w/h
    c.height = h;

    ctx.drawImage(canvas, x, y, w, h,  0, 0, w, h); // draw in region at (0,0)
    return c;                                       // return canvas
}

然后打电话，例如：

var newCanvas = regionToCanvas(cnv, x, y, width, height);
document.body.appendChild(newCanvas);              // add to DOM