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

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

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

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

Q&A

解決済

4回答

574閲覧

Javascriptで画像を表示

wolf0325

総合スコア8

JavaScript

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

0グッド

0クリップ

投稿2020/01/27 13:41

前提・実現したいこと

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>

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

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

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

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

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

wolf0325

2020/01/27 21:55

m.ts10806さん。 ありがとうございます。 次回から使用するように気を付けます。
guest

回答4

0

私が連番を含む文字列を作りたい時はこんなふうにしてます。
・バックスラッシュで囲むテンプレート文字列
・padStart()で一桁の数字の先頭に0をつけた文字列を作る

let xx = 1; let yy = 1; for (yy=1; yy<=10; yy++) { console.log(`Image${String(xx).padStart(2, '0')}_${String(yy).padStart(2, '0')}.jpg`); }

Image01_01.jpg
Image01_02.jpg
Image01_03.jpg
Image01_04.jpg
Image01_05.jpg
Image01_06.jpg
Image01_07.jpg
Image01_08.jpg
Image01_09.jpg
Image01_10.jpg

投稿2020/01/27 15:22

technocore

総合スコア7200

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

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

wolf0325

2020/01/27 21:56

technocorecriss さん ありがとうございます。  コメントのコードを使う場合、 以下の部分にどのように使用すればいいのでしょうか。 すみませんが教えてください。 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); }
guest

0

ベストアンサー

for文の仕組みは、Javascriptのマニュアルで確認してください。

ループと反復処理
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration

期待の回数だけループしているのが確認できたら、
画像を表示できない原因はループ内の処理にあると思います。

投稿2020/01/28 16:47

technocore

総合スコア7200

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

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

0

for (yy=1; yy<=1; yy++) {

これではyyが1から1なので、1回しかループしません。

'Image_01_0'+ yy + '.jpg';

これではyyが10のとき Image_01_010.jpg になってしまいます。

それと、htmlとJavascriptはファイルを分離しましょう。
その方が見易くて管理もしやすいです。

<!-- index.html --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>表示</title> </head> <body> <canvas id="my-canvas" width="400" height="400"></canvas> <script src="./test.js"></script> </body> </html>
// test.js 'use strict;' const canvas = document.querySelector('#my-canvas'); const context = canvas.getContext('2d'); for () { 処理 }

投稿2020/01/28 15:19

technocore

総合スコア7200

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

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

wolf0325

2020/01/28 16:17

technocorecrissさん >それと、htmlとJavascriptはファイルを分離しましょう。 >その方が見易くて管理もしやすいです。 → わかりました。 for (yy=1; yy<=1; yy++) {  → 「yy<= 1」 を2以上にしても、表示されるのは1つだけです。    間違えがわかりません。。   すみませんが教えてください。
guest

0

画像1枚を描画する処理をforループで回せばいいと思います。

for () { 画像ファイル名を生成する 画像配置の座標を計算する キャンバスに画像を描画する }

投稿2020/01/28 00:53

technocore

総合スコア7200

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

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

wolf0325

2020/01/28 14:23

作ってみたのですが 画像が1枚しか表示されません。 間違えがわかりません。 教えてください。 コードは以下の通りです。 ```lang-Javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表示</title> </head> <body> <canvas width="10000" height="22000"> Canvas対応ブラウザを使用して下さい </canvas> </body> </html> <script> let xx = 1; let yy = 1; for (yy=1; yy<=1; yy++) { window.addEventListener("load", function(){ // Canvas要素を読み出し var myCanvas = document.getElementsByTagName("canvas")[0]; // コンテキストを取得 var context = myCanvas.getContext("2d"); if (!context){ return; } // 画像を描画する var Imageyy = new Image(); Imageyy.src = 'Image_01_0'+yy+'.jpg'; Imageyy.onload = function(){ // 座標とサイズを指定して描画 context.drawImage(Imageyy, yy*500, 0,500,700); } }, false); } </script> ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問