Q&A
chromeなどの開発ツールでデバッグしましょう。デバッグは自力でするものですよ。
大文字小文字が…
背景画とキャラクターの画像を表示し、キャラクターをドラックで動かすプログラムを作りたいのですが、キャラクターが表示されず困っています。画像のurlは正しく、画像がフォルダ内にあります。
何処に問題があるのでしょうか？
canvastest.html
<!DOCTYPE html> <meta charset="UTF-8"> <head> <html lang="ja"> <style> body{font-size:14pt;font-weight:plain;} h1{color:white;font-size:24pt;background-color:red;} #canvas{background-color:white;border:1px solid gray;} </style> <script src="backcharacter.js"></script> <body onload="initial();"> <h1 id="title">hello</h1> <canvas id="canvas" width="500" height="400"></canvas> </body> </html>
backcharacter.js
var canvas; var img,bkimg; function initial(){ canvas=document.querySelector('#canvas'); canvas.onclick=doDown; img=new Image(); img.src="character.png"; bkimg=new Image(); bkimg.src="background.png"; bkimg.onload=function(){ drawBackground(); } } function doDown(event){ drawBackground(); drawImage(event); } function drawBackground(){ var context=canvas.getContext('2d'); context.clearRect(0,0,500,400); context.drawImage(bkimg,0,0,500,400); } function drawImage(event){ var context=canvas.getContext('2d'); var h=event.ClientX-canvas.offsetLeft; var w=event.ClientY-canvas.offsetTop; context.drawImage(img,h-img.width/2,w-img.height/2); }
回答2件
0
何処に問題があるのでしょうか？
HTML の構造に問題があります。
JavaScriptを扱う場合、HTMLに問題がないことが前提になります。
txt
1ご質問のツリー 2[*.html] 3+- !DOCTYPE html 4+- meta[charset] 5+- head 6 +- html[lang] 7 +- style 8 +- script 9 +- body 10 +- h1 11 +- canvas 12 13正しいツリー 14[*.html] 15+- !DOCTYPE html 16+- html[lang] 17 +- head 18 : +- meta[charset] 19 : +- style 20 : +- script 21 +- body 22 +- h1 23 +- canvas
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <style> 6 body{font-size:14pt;font-weight:plain;} 7 h1{color:white;font-size:24pt;background-color:red;} 8 #canvas{background-color:white;border:1px solid gray;} 9 </style> 10 <script src="backcharacter.js"></script> 11</head> 12<body onload="initial();"> 13 <h1 id="title">hello</h1> 14 <canvas id="canvas" width="500" height="400"></canvas> 15</body> 16</html>
追記）
HTMLImageElement には、読み込みが完了したかどうかを知るための complete 属性があります。
２つのCanvas描画関数に利用した例：
javascript
1var canvas, context; 2var img,bkimg; 3 4function initial(){ 5 canvas = document.querySelector('#canvas'); 6 context = canvas.getContext('2d'); // global スコープの context に参照を保持させる 7 canvas.onclick = doDown; 8 9 img=new Image(); 10 img.src="character.png"; 11 bkimg=new Image(); 12 bkimg.src="background.png"; 13 bkimg.onload=function(){ 14 drawBackground(); // 背景は先に 15 } 16} 17 18// canvas を click すると呼ばれる 19function doDown(event){ 20 drawBackground(); 21 drawImage(event); 22} 23function drawBackground(){ 24 if( bkimg.complete ) { // 読み込みが完了しているなら描画 25 context.clearRect(0,0,500,400); 26 context.drawImage(bkimg,0,0,500,400); 27 } 28} 29function drawImage(event){ 30 if( img.complete ) { // 読み込みが完了しているなら描画 31 // 意図した位置に表示するにはもうひと工夫必要（あとで考える箇所） 32 var h = event.ClientX-canvas.offsetLeft; 33 var w = event.ClientY-canvas.offsetTop; 34 context.drawImage(img,h-img.width/2,w-img.height/2); 35 } 36}
ご質問のコードに少し手を加えました（クリックするまでは、背景しか表示されません）。
投稿2020/08/14 21:21
編集2020/08/14 22:11
総合スコア5432
0
画像が読み込まれる前に描画しようとしてしまっている可能性が高いですね。
img.onload=function(){ context.drawImage(img,h-img.width/2,w-img.height/2); }
このようにすれば表示されるはずです。
投稿2020/08/14 16:36
総合スコア209
最後のcontext.drawImage(img,h-img.width/2,w-img.height/2);
を上記のように書き換えればよいのでしょうか？
あなたの回答
tips
プレビュー
