###前提・実現したいこと
Canvasを使用した画像合成に関する質問です。
タイトル通り、配列内に画像パスを格納し、格納されている順に画像を合成したいと考えています。
どのようにして実現したらよいでしょうか?
単にループで描画すると、画像が表示されたりされなかったりで…
(onloadについて今一つ理解できていないように思います)
何かご回答を頂けると助かります_(..)
###追記
ソースコードを記述しました。
配列内の要素数(パス)が1つの場合は正常に画像が表示され、2つの場合は2つ目のみが表示され、3つの場合は何も表示されませんでした。
理想は、配列内のすべての画像を合成したいのですが、どう実現してよいのかわかりません。
ロードの問題だとは思うのですが…。
ご回答よろしくお願いします_(..)
javascript
1var fileArry = ["picture/test1.png", "picture/test2.png", "picture/test3.png"]; // 読み込みたい画像のパスの配列 2$(function(){ 3 var canvas = document.getElementById("texture_target"); 4 if(canvas.getContext){ 5 var context = canvas.getContext("2d"); 6 for(var i = 0; i < fileArry.length; i++){ 7 context.globalCompositeOperation = "source-over"; 8 context.globalAlpha = 1.0; 9 var parts_img = new Image; 10 parts_img.src = fileArry[i]; 11 parts_img.onload = function(){ 12 context.drawImage(parts_img, 0, 0); 13 }; 14 } 15 } 16});
回答1件
あなたの回答
tips
プレビュー