詳しい人求む！

どこが間違えているのか分かりません

解決済

質問者：yoshi00030207
質問日時：2019/06/20 14:10
回答数：2件

コンソールには何も表示されないのに、walk.pngが表示されません。
画面は真っ白です。
javascriptのコードはこれです、

let c =document.getElementById('c');
c.width = 640;
c.height = 640;
let ct = c.getContext('2d');
var walk = new Object();
walk.img = new Image();
walk.img.src = 'img/walk.png';

function add(s, sx, dx, dy){
ct.drawImage(s.img, sx * 50, 0, 50, 80, dx, dy, 50, 80);
}

ct.fillStyle = '#770';
ct.fillRect(0, 0, 640, 640);

add(walk, 1, 0, 0);

ファイルはこのように作っています、

index.html
js -----------------main.js
img -------------- walk.png

htmlはこのように作っています、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>walk</title>
</head>
<body>
<canvas id="c"></canvas>

<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

>ご指定の背景色には塗られていると思うのですが

ct.fillStyle = 'blue';
と変更したら青い画面は表示されました

>とりあえず、一番最初は何もせずに
　ct.drawImage(s.img, 0, 0);
などとして、表示されることを確認してみるのが宜しいかと。

function add(s){
ct.drawImage(s.img, 0, 0);
}
add(walk);
と変更しましたが同じように,
コンソールにも画面にも何も表示されませんでした

No.1の回答に寄せられた補足コメントです。補足日時：2019/06/21 00:04
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2019/06/20 16:34

こんにちは

main.jsの内容が
＞javascriptのコードはこれです
ということと解釈しました。

＞画面は真っ白です。
ってーことはなくて、ご指定の背景色には塗られていると思うのですが・・・？
ただし、画像は表示されないってことだと解釈しました。
（本当に真っ白なら、もっと前の部分でエラーが発生していますね）

画像のアドレスなどには間違いがないものと仮定して、一番ありそうなのは、画像を読込む前にキャンバスに描画しようとしていて、（データが無いので）キャンセルされていることではないでしょうか？
以下のサイトの中ほどをご覧になれば、これに関する解説と対応法が示されています。
http://www.html5.jp/canvas/how6.html

もう一つありそうなのは、ご使用の画像サイズにもよりますが、
＞ct.drawImage(s.img, sx * 50, 0, 50, 80, dx, dy, 50, 80);
で切り取っている部分の内容がなくなってしまっているとか・・・
とりあえず、一番最初は何もせずに
　ct.drawImage(s.img, 0, 0);
などとして、表示されることを確認してみるのが宜しいかと。