前提・実現したいこと
Javascriptで画像を表示したいのですが
画像ファイル名が番号の連番で決まっているため
コードで簡単に作れないか教えてください。
また、表示する場所も等間隔での配置も同じように作れないか教えてください。
連番の内容は
Image_XX_YY.jpg
XX=01~15
YY=01~16
になります。
例えば、Image_01_01.jpg ・・・ Image_01_16.jpg
Image_02_01.jpg・・・・ となります。
該当のソースコード
使用言語:Javascript
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SZK-2番地</title> </head> <body> <canvas width="10000" height="22000"> Canvas対応ブラウザを使用して下さい </canvas> </body> </html> <script> window.addEventListener("load", function(){ // Canvas要素を読み出し var myCanvas = document.getElementsByTagName("canvas")[0]; // コンテキストを取得 var context = myCanvas.getContext("2d"); if (!context){ return; } // 画像を描画する var Image_01_01 = new Image(); Image_01_01.src = "Image_01_01.jpg"; Image_01_01.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(this, 0, 0,1000,1400); } var Image_01_02 = new Image(); Image_01_02.src = "Image_01_02.jpg"; Image_01_02.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(this, 1000, 0,1000,1400); } var Image_01_03 = new Image(); Image_01_03.src = "Image_01_03.jpg"; Image_01_03.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(this, 2000, 0,1000,1400); } var Image_01_04 = new Image(); Image_01_04.src = "Image_01_04.jpg"; Image_01_04.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(this, 3000, 0,1000,1400); } var Image_01_05 = new Image(); Image_01_05.src = "Image_01_05.jpg"; Image_01_05.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(this, 4000, 0,1000,1400); } var Image_01_06 = new Image(); Image_01_06.src = "Image_01_06.jpg"; Image_01_06.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(this, 5000, 0,1000,1400); } var Image_01_07 = new Image(); Image_01_07.src = "Image_01_07.jpg"; Image_01_07.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(this, 6000, 0,1000,1400); } var Image_01_08 = new Image(); Image_01_08.src = "Image_01_08.jpg"; Image_01_08.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(this, 7000, 0,1000,1400); } }, false); </script>回答4件
あなたの回答
tips
プレビュー