web-dev-qa-db-ja.com

HTML5キャンバス要素とそのコンテンツを複製する方法はありますか？

すべての描画コンテンツでキャンバス要素のdeepコピーを作成する方法はありますか？

javascripthtml5canvasclone
54
Evgenyt

実際に、キャンバスデータをコピーする正しい方法は、古いキャンバスを新しい空白のキャンバスに渡すことです。この機能を試してください。

function cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;
}

GetImageDataの使用は、キャンバスのコピーではなく、ピクセルデータアクセス用です。ブラウザでのコピーは非常に遅く、困難です。避けるべきです。

107
Robert Hurst

あなたは電話することができます

context.getImageData(0, 0, context.canvas.width, context.canvas.height);

imageDataオブジェクトを返します。これには、CanvasPixelArray型のdataという名前のプロパティがあり、すべてのピクセルのrgbおよび透明度の値が含まれています。これらの値はキャンバスへの参照ではないため、キャンバスに影響を与えることなく変更できます。

要素のコピーも必要な場合は、新しいキャンバス要素を作成してから、すべての属性を新しいキャンバス要素にコピーできます。その後、使用することができます

context.putImageData(imageData, 0, 0);

imageDataオブジェクトを新しいキャンバス要素に描画するメソッド。

詳細については、この回答を参照してください HTML CanvasのgetPixel？ ピクセルの操作について。

このmozillaの記事も役に立つかもしれません https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

11
Castrohenge