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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

989閲覧

html: canvasが二つできるのはなぜ

Ykkykk

総合スコア140

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/09/26 04:29

編集2019/09/26 04:49

HTMLにcanvasタグを設置してページを表示すると、canvasタグが二つになるのですが、理由は何なのでしょうか?

<canvas style="width:640; height480; transform-origin: 0px 0px; transform: scale (1.5957); position: static; left: 5px; top: 0px; background:#FFF;"></canvas>

上記のようなcanvasタグを書いてHTMLをブラウザで表示しF12を押してインスペクターで見てみると、canvasタグが二つになってしまいます。
しかも、上記canvasはmainの内側にあるのですが、F12で見てみると、

<html lang="ja"> <head></head> <body> <main> <canvas style="width:640; height480; transform-origin: 0px 0px; transform: scale (1.5957); position: static; left: 5px; top: 0px; background:#FFF;"></canvas> </main> <canvas> </body> </html>

のように、mainの閉じタグの外側にもう一つcanvasができてしまいます。
これはcanvasタグの正常な挙動ということでしょうか?
このmainの閉じタグの下にできてしますcanvasをmainの内側に入れることはできないのでしょうか?

ご教示いただけますと幸いです。よろしくお願いいたします。

追記

HTMLは以下のような形です。

html

1<html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 </head> 5 <body> 6 <div id="content"> 7 <p> 8 <script type="text/javascript"> 9 // hogehoge.jsに渡す変数を定義 10 </script> 11 <script type="text/javascript" src="hogehoge.js"></script> 12 </p> 13 </div> 14 <img id="hoge"> 15 <canvas style="width:640; height480; transform-origin: 0px 0px; transform: scale(1.5957); position: static; left: 5px; top: 0px;"></canvas> 16 </body> 17</html>

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

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

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

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

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

yambejp

2019/09/26 04:33

確認したOSとブラウザの種類とバージョンは?
miyabi_takatsuk

2019/09/26 04:36

元HTMLの全文も記載ください。
Ykkykk

2019/09/26 04:42 編集

yambejp様:確認したOSはUbuntu 18.04.3 LTSでブラウザはChrome 77.0.3865.90(Official Build)(64 ビット)とFireFox 69.0.1です・ miyabi_takatsuk様:全文載せたいのですが、どこを伏せれば良いか迷っている状態です。
yambejp

2019/09/26 04:45 編集

> どこを伏せれば良いか迷っている 少なくとも例示されたcanvaをブラウザで確認する限り問題はなさそうです 現象が確認できる最低限のソースを例示ください 複数ブラウザで確認できているなら、単にソースに誤記があるだけだと思いますが・・・
Ykkykk

2019/09/26 04:50

HTMLを追加いたしました。 IDの名前やタイトルなどを削除し、ファイル名を変更しただけでHTML自体に変更は加えていません
miyabi_takatsuk

2019/09/26 04:52

本文修正ありがとうございます。 って、main要素が元コードにはないようですが・・・。 JavaScriptで何かDOMコントロールしてるんですか?
guest

回答1

0

ベストアンサー

追記

mainがなくなってしまいましたが大丈夫ですか?
見た感じですとhogehoge.jsがcanvasを追加しているように推測されますが

投稿2019/09/26 04:51

yambejp

総合スコア114843

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

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

Ykkykk

2019/09/26 04:55

mainを書き忘れました。。。 yambejp様が仰るように、jsファイルがcanvasタグを追加していました。 document.body.appendChild(canvas); となっていたことが原因でした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問