javascript - 仅将 Canvas 的一部分转移到新 Canvas

Question

我有一个 canvas，id 为 cnv。

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

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

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

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

Answer 1

假设您已经指定了 x、y、宽度和高度的区域，您可以执行以下操作:

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