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

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

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

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

Q&A

解決済

1回答

481閲覧

画像の読み込みに失敗する

meron-pan

総合スコア44

JavaScript

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

0グッド

0クリップ

投稿2017/12/12 03:52

###前提・実現したいこと
MicrosoftのインターネットブラウザEdgeでプログラム動作を確認していたのですが、たまたまMacのSafariを使ったところ、画像の表示を行う部分のプログラムのみが、反応しなくなってしまいました。その後、Chromeも試したのですが、Safariと同様の反応になってしまい困っています。エラーメッセージは全く表示されず、特にコードのは問題があるようには思えません。

###該当のソースコード

Javascript

1//キャンバスを制作部分 2canvas1 = document.createElement("canvas"); 3canvas1.width = 1200; 4canvas1.height = 600; 5document.body.appendChild(canvas1); 6layer1 = canvas1.getContext("2d"); 7 8//画像に動作を設けるためのクラス部分 9function Character(URL) { 10 this.x = 0; 11 this.y = 0; 12 this.width = 0; 13 this.height = 0; 14 //画像配置 15 var pict = new Image(); 16 pict.src = URL; 17 18 this.draw = function (ctx, x,y, width, height) { 19 this.x = x; 20 this.y = y; 21 this.width = width; 22 this.height = height; 23 24 if(pict.complete){ 25 ctx.drawImage(pict, this.x, this.y); 26 } 27 } 28} 29//インスタンス 30aaa = new Character("aaa.png"); 31aaa.draw(layer1,100,100,200,200);

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

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

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

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

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

guest

回答1

0

ベストアンサー

エラーメッセージは全く表示されず、特にコードのは問題があるようには思えません。

はい. コード上は問題は全くありません. が, おそらくあなたが思い描いている処理の内容とコードの内容とが乖離しています.

Imageオブジェクトにおける画像の解析処理が完了する前(つまり**loadイベントが発生する前**)に, aaa.drawメソッドを実行しているからです.

NOTE:pict.completeを使っているので, 現在のコードは「画像の読み込みが完了していなくても, drawメソッドが失敗しないようにしている」のであって, 画像が確実にcanvasに書き込まれることを保証しているわけではありません.

従って, Character.drawメソッドにより確実にグラフィックが描かれるようにするのであれば, loadイベントの発生を待ってCharacterを生成するほうが自然です.

JavaScript

1 2//キャンバスを制作部分 3canvas1 = document.createElement("canvas"); 4canvas1.width = 1200; 5canvas1.height = 600; 6document.body.appendChild(canvas1); 7layer1 = canvas1.getContext("2d"); 8 9//画像に動作を設けるためのクラス部分 10function Character(pict) { 11 this.x = 0; 12 this.y = 0; 13 this.width = 0; 14 this.height = 0; 15 16 this.draw = function (ctx, x,y, width, height) { 17 this.x = x; 18 this.y = y; 19 this.width = width; 20 this.height = height; 21 22 ctx.drawImage(pict, this.x, this.y); 23 } 24} 25 26var pict = new Image(); 27pict.onload = function(e){ 28 //インスタンス 29 aaa = new Caracter(pict); 30 aaa.draw(layer1,100,100,200,200); 31}; 32pict.src = "aaa.png";

投稿2017/12/12 04:16

defghi1977

総合スコア4756

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

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

meron-pan

2017/12/12 05:27

ありがとうございます。原因がはっきりできて、とてもスッキリしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問