0

我<canvas>在一个文档中有两个元素。

我想在 canvas1 上绘制一个形状，使用该ctx1.getImageData()方法复制该形状的部分并在 canvas2 上为这些部分设置动画。

我读到 usingctx2.putImageData()比 using 慢ctx2.drawImage()。

如何从JavaScript 中的 a （从调用返回）创建Image对象？CanvasPixelArrayctx1.getImageData()

（注意：我不想复制整个 canvas1，而只是复制其中的一部分。另外，我不关心旧浏览器）

4

2 回答 2

1

这应该做你想做的，除非我错过了什么：

ctx2.drawImage(canvas1, source_x, source_y, source_width, source_height, dest_x, dest_y, dest_width, dest_height);

该drawImage()函数适用于image和canvas元素，因此无需创建新image对象或临时对象，canvas除非您需要操作像素。

于 2012-05-07T00:45:06.857 回答
0

我想我明白了。我必须创建一个临时画布元素，然后使用该canvas.toDataURL()方法。不过，我很想找到一个不使用临时画布的解决方案。

// ctx1 and ctx2 are the 2d context objects for canvas1 and canvas2

var image_data = ctx1.getImageData( 23, 43, 20, 20 );
var image = getImageObjectByImageData( image_data );

ctx2.drawImage( image, 20, 30 );

function getImageObjectByImageData( $image_data )
{
    var temp_canvas = document.createElement( 'canvas' );
        temp_canvas.height = $image_data.width;
        temp_canvas.width = $image_data.height;

    var temp_context = temp_canvas.getContext( '2d' );
        temp_context.putImageData( $image_data, 0, 0 );

    var img = new Image();
        img.width = $image_data.width;
        img.height = $image_data.height;
        img.src = temp_canvas.toDataURL();

    return img;
}
于 2012-05-06T19:01:58.020 回答