質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3128閲覧

Canvasを用いて複数の画像を合成したいと考えています

tarotarosu

総合スコア114

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/04/14 06:37

###前提・実現したいこと
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];としてやればうまくいくと考えていたのですが…

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

検証が必要ですが、

parts_img に 値が与えられ、それのonloadが終わる前に arr[2]がさらに与えられたからだと思います。

onloadは同期では動きません。
非同期です。

投稿2016/04/14 06:43

sokha

総合スコア216

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tarotarosu

2016/04/14 07:26

同期処理、非同期処理について調べ、検証してみたいと思います。 回答ありがとうございました_(._.)_
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問