2021年2月18日解決済み
15puzzle.pngの画像が表示されません
スタッフ
この回答を見るにはプレミアムプランへの登録が必要です
プレミアムプランとは？
スタッフ
スタッフ
この回答を見るにはプレミアムプランへの登録が必要です
プレミアムプランとは？
3分動画でマスターできるプログラミング学習サービスです。あなたもプログラミングを始めてみませんか？
Copyright © 2011-2026 dotinstall.com. All Rights Reserved.
VSC上では画像が開くことを確認しました。
Windows使用です。
コードはHTML、JSとも間違いがないことを確認しました。
どこが間違って開かないのか教えてください。
よろしくお願いいたします。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>15Puzzle</title>
<style>
canvas {
background: pink;
display: block;
margin: 0 auto;
cursor: pointer;
}
</style>
</head>
<body>
<canvas width="280" height="280">
Canvas not supported.
</canvas>
<script src="js/main.js"></script>
</body>
</html>
JavaSvript
'use strict';
(() => {
class Puzzle {
constructor(canvas) {
this.canvas = canvas;
this.ctx = this.canvas.getContext('2d');
this.img = document.createElement('img');
// this.renderTile(9, 2, 1);
this.renderTile(12, 1, 3);
}
renderTile(n, col, row) {
this.img.src = 'img/15puzzle.png';
this.img.addEventListener('load', ()=> {
this.ctx.drawImage(
this.img,
(n % 4) * 70, Math.floor(n / 4) * 70, 70, 70,
col * 70, row * 70, 70, 70
);
});
}
}
const canvas = document.querySelector('canvas');
if (typeof canvas.getContext === 'undefined') {
return;
}
new Puzzle(canvas);
})();