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

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

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

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

Q&A

解決済

2回答

826閲覧

JavaScriptでCanvasを自動複数生成したい2

meron-pan

総合スコア44

JavaScript

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

1グッド

1クリップ

投稿2017/09/24 15:00

###前提・実現したいこと
Javascriptでcanvasを複数作成し、レイヤー化させたいと思っています。
しかし、canvasを一回一回丁寧に作成していくのはかなり汎用性に劣るため、
繰り返し作成できるようにしたいです。

###発生している問題・エラーメッセージ

19行目 document.body.appendChild(canvas[i]) ---Unable to get property 'appendChild' of undefined or null reference

###該当のソースコード

JavaScript

1function aaa (layernum, width ,hieght){ 2 var x = width; 3 var y = hieght; 4 var canvas = new Array("Tapcav","Dbgcav","Dlgcav"); 5 for(i = 1; i < layernum-3 ; i++ );{ 6 canvas.push("camvas" + i) 7 } 8 9 for(i = 0; i<canvas.length ; i++ ) { 10 11 canvas[i] = document.createElement("canvas"); 12 canvas[i].width = x ; 13 canvas[i].height = y ; 14 //CSS 15 canvas[i].style.posittion = "absolute" ; 16 canvas[i].style.left = "0" ; 17 canvas[i].style.zIndex = i ; 18 19 document.body.appendChild(canvas[i]) 20 } 21} 22 23aaa(6,500,500);

###試したこと
canvasの自動生成のプログラムを作っています。配列で変数名を作り、Canvasの生成と設定を行っています。最後の行のコードで描画コンテキストの取得を行ったところ、「オブジェクトが必要です」と言われました。ほかのコードにも問題があるのかもしれませんが、回答お願いします。

ssmxgo👍を押しています

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

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

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

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

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

guest

回答2

0

とりあえず、<body> タグが読み込み始まる前に実行してませんか?

document.body.onload もしくは </body> 付近で実行してください

投稿2017/09/24 15:07

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

meron-pan

2017/09/24 15:31

わかりやすく、簡潔な回答ありがとうございます。無事動かすことができました。
guest

0

ベストアンサー

スクリプトの書く位置が問題かも。

【DOMContentLoaded - Web 技術のリファレンス | MDN】
https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded

【DOMContentLoadedイベントとloadイベントの違い[タイミング][JavaScript]】
http://noumenon-th.net/programming/2017/06/11/domcontentloaded/

JavaScript

1document.addEventListener( 'DOMContentLoaded', function(){ 2 //〜処理〜 3}, false );

投稿2017/09/24 15:08

kei344

総合スコア69364

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

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

meron-pan

2017/09/24 15:18

Canvasがhtmlの<body>に書くために問題が起こっているという認識でいいのですか? 確かに、このコードはheadのところで外部Javascriptを読み込ませています。
kei344

2017/09/24 15:21

headのところで動かすとbodyの読み込み前なので、loadイベントとかを使って読み込みが終わってから動かすのが良いです。
meron-pan

2017/09/24 15:32

解説リンクまで貼ってくれて、大変勉強なりました。ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問