###前提・実現したいこと
Canvasを用いて複数の画像を合成したいと考えています。
###該当のソースコード
javascript
1var canvas = document.getElementById("texture_target"); 2 if(canvas.getContext){ 3 var context = canvas.getContext("2d"); 4 context.globalCompositeOperation = "source-over"; 5 context.globalAlpha = 1.0; 6 var parts_img = new Image; 7 parts_img.src = src_arr[1]; 8 parts_img.onload = function(){ 9 context.drawImage(parts_img, 0, 0); 10 }; 11 context.globalCompositeOperation = "source-over"; 12 context.globalAlpha = 1.0; 13 parts_img.src = src_arr[2]; 14 parts_img.onload = function(){ 15 context.drawImage(parts_img, 0, 0); 16 }; 17 }
###発生している問題・エラーメッセージ
上のように記述し、元画像にsrc_arr[1]に格納された画像と、src_arr[2]に格納されたコードを合成しようとしたのですが、src_arr[2]しか元画像に合成されていませんでした。
そこで下記のように記述すると、src_arr[1]とsrc_arr[2]の両方が合成されていました。
最初に記述したコードでうまく反映されない原因は何なのでしょうか?
回答を頂けると助かります。
###該当のソースコード
javascript
1var canvas = document.getElementById("texture_target"); 2 if(canvas.getContext){ 3 var context = canvas.getContext("2d"); 4 context.globalCompositeOperation = "source-over"; 5 context.globalAlpha = 1.0; 6 var parts_img = new Image; 7 parts_img.src = src_arr[1]; 8 parts_img.onload = function(){ 9 context.drawImage(parts_img, 0, 0); 10 }; 11 context.globalCompositeOperation = "source-over"; 12 context.globalAlpha = 1.0; 13 var parts_img2 = new Image;//変更点 14 parts_img2.src = src_arr[2];//変更点 15 parts_img2.onload = function(){ 16 context.drawImage(parts_img2, 0, 0);//変更点 17 }; 18 };
drawImage()では、第一引数で指定したイメージを描画するので、parts_img.src = src_arr[2];としてやればうまくいくと考えていたのですが…
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/14 07:26