複数のキャンバス要素を1つのキャンバス要素に配置するにはどうすればよいですか？

JavaScriptで作成された複数のキャンバス要素があります。私の質問です： "私はどのように複数のキャンバス要素を1つのキャンバス要素に配置できますか？"複数のキャンバス要素を1つのキャンバス要素に配置するにはどうすればよいですか？

出典

2013-04-18 Julian

あなたはjsfiddleを設定できます –

あなたが行きます。

JSfiddle

それはそれぞれのキャンバスを取得し、それらPNGの
アクセスバッファキャンバス作り、その中に互いの上にPNG年代を書きます
PNGにバッファキャンバスをバックライトと送信ここにチェック（IMGタグ

にそれだけで#buffer canvas要素display: none;を与え、すべてが見えなく起こります。http://jsfiddle.net/Allendar/UqxCY/2/）。

HTML

<body onload="generatePNG()"> 
    <canvas id="c1"></canvas> 
    <canvas id="c2"></canvas> 
    <canvas id="c3"></canvas> 

    <canvas id="buffer"></canvas> 

    <div id="output">Empty</div> 
</body>

CSS

canvas[id^=c], div[id=output] { 
    border: 1px solid red; 
} 

canvas[id=buffer] { 
    border: 1px dotted green; 
} 

#output { 
    padding: 15px; 
} 

#output img { 
    border: 1px dotted blue; 
}

はJavaScript

function generatePNG() { 
    var b_canvas1 = document.getElementById("c1"); 
    var b_context1 = b_canvas1.getContext("2d"); 
    b_context1.fillRect(10, 50, 50, 50); 
    var b_canvas2 = document.getElementById("c2"); 
    var b_context2 = b_canvas2.getContext("2d"); 
    b_context2.fillRect(80, 50, 50, 50); 
    var b_canvas3 = document.getElementById("c3"); 
    var b_context3 = b_canvas3.getContext("2d"); 
    b_context3.fillRect(150, 50, 50, 50); 

    var img1 = new Image(); 
    img1.src = b_canvas1.toDataURL("image/png"); 
    var img2 = new Image(); 
    img2.src = b_canvas2.toDataURL("image/png"); 
    var img3 = new Image(); 
    img3.src = b_canvas3.toDataURL("image/png"); 

    var buffer = document.getElementById("buffer"); 
    var buffer_context = buffer.getContext("2d"); 
    buffer_context.drawImage(img1, 0, 0); 
    buffer_context.drawImage(img2, 0, 0); 
    buffer_context.drawImage(img3, 0, 0); 

    var buffer_img = new Image(); 
    buffer_img.src = buffer.toDataURL("image/png"); 

    var output = document.getElementById('output'); 
    output.innerHTML = '<img src="' + buffer_img.src + '" alt="Canvas Image" />'; 
}

出典

2013-04-18 12:51:44

これは動作しますが、jqueryを使用しています。 jqueryを使用せずにそれを実行する可能性はありますか？ – Julian

確か;質問が更新され、ネイティブJavaScriptで完全に機能するようになりました。 –

中間イメージを作成する必要はありません。 drawImageメソッドは、描画するイメージとして別のキャンバスを直接使用できます。 –

おそらく、このような何か、ターゲット・キャンバス（未テスト）にその画像をペイント、画像へのソースキャンバスをエクスポートします。ここでは

function drawCanvasOnOtherCanvas(src, target) { 
    var img = new Image(); 
    img.onload = function() { 
    target.drawImage(img, 0, 0); 
    }; 
    img.src = src.toDataURL('image/png'); 
}

出典

2013-04-18 12:41:03

キャンバスのdrawImageメソッドは、実際にすることができます画像の代わりに別のキャンバスを撮る - キャンバスを最初に画像に変換する必要はありません。（。WhatWG's documentationを参照）

私は証明するためにAllendarのJSFiddleを簡素化しました：

http://jsfiddle.net/7hEKL/

基本的に、すべてを行う必要がある：

targetCanvas.drawImage(sourceCanvas, 0, 0);

、あなたはに良いことがあります行く。

出典

2013-04-19 15:52:19

複数のキャンバス要素を1つのキャンバス要素に配置するにはどうすればよいですか？

答えて

関連する問題