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

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

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

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

HTML

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

Q&A

解決済

1回答

24724閲覧

JavaScriptのCanvasが使えません

Tan3

総合スコア39

JavaScript

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

HTML

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

1グッド

1クリップ

投稿2016/01/16 03:54

編集2016/01/16 06:24

シューティングゲームを始めて作ります。
JavaScriptでシューティングゲームを作っています。
四角を描きたいのですが、どこか書き間違えてるみたいで、表示されません。初心者向けにかかれたサイトを見ながら作成しているのですが、うまくいきません・・・(こちらのサイトです。綺麗にまとめられていて、読みやすいです。http://lambdalisue.hatenablog.com/entry/2013/12/25/160910

###発生している問題・エラーメッセージ
四角形が出ません。
Uncaught TypeError: Cannot read property 'getContext' of null
サイト中ほどのキャンパスに描画するの項目がクリアできません。
エラーメッセージスクリーンショット

###ソースコード

javascript

1"use strict" 2 3// 全体で使用する変数を定義 4var canvas, ctx; 5 6// ページロード時に呼び出される処理を指定 7// window.onload = function(){ から }; までの間が呼び出される。 8window.onload = function() { 9 // id を用いてキャンバスオブジェクトを取得し 10 // canvas 変数に代入 11 // 12 // オブジェクト = document.getElementById('id'); 13 // 14 canvas = document.getElementById('screen'); 15 16 // 2次元用の描画コンテキスト(とよばれるナニか)を取得し代入 17 ctx = canvas.getContext('2d'); 18 19 // 塗りつぶしの色を指定(白) 20 ctx.fillStyle = '#fff'; 21 // 塗りつぶされた四角形(横,縦 = 20, 30)を(8, 5)の位置に描画 22 ctx.fillRect(8, 5, 20, 30); 23 24 // 線の色を指定(赤) 25 ctx.strokeStyle = '#f00'; 26 // からっぽの四角形(横,縦 = 90, 10)を(40, 55)の位置に描画 27 ctx.strokeRect(40, 55, 90, 10); 28}; 29 30// 変数 message を定義 31var message; 32// 変数 message に「文字列」を代入 33message = "Hello World"; 34 35// デベロッパーツールにログとして表示 36console.log(message); 37 38// 変数 message2 を定義して「文字列」を代入 39var message2 = "ハローワールド"; 40 41// デベロッパーツールにログとして表示 42console.log(message2);

html

1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<title>Kawaz Advent Calendar 2014-12-25</title> 4<style> 5body{ 6 background: #eee; 7} 8canvas{ 9 background: #000; 10 display: block; 11 margin: auto; 12} 13</style> 14<img id="player" src="img/player.png"> 15<img id="enemy" src="img/enemy.png"> 16<img id="player_bullet" src="img/player_bullet.png"> 17<img id="enemy_bullet" src="img/enemy_bullet.png"> 18 19<canvas width='240' height='320'><canvas> 20<script src="js/shooting.js"></script> 21 22

###補足情報(言語/FW/ツール等のバージョンなど)
JavaScript
CotEditor(バージョン 2.3.4 (95))
Chrome(バージョン 47.0.2526.111 (64-bit))

dddd_gond👍を押しています

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

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

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

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

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

Lhankor_Mhy

2016/01/16 05:35

HTMLはどうなっていますか?
Tan3

2016/01/16 06:34

HTMLの方に問題がありました。気が付きませんでした、ありがとうございます。
guest

回答1

0

ベストアンサー

canvasタグにid="screen"はありますか?
あとは、、scriptはcanvasの後に持ってきていますか?HTMLも見せていただくと回答が付くと思いますよ。

html

1<canvas id="screen" width='240' height='320'></canvas> 2<script src="js/shooting.js"></script>

投稿2016/01/16 05:44

編集2016/01/16 06:08
jinco

総合スコア432

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

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

Tan3

2016/01/16 06:31

回答者さんのおっしゃる通り、id=”screen"が抜けていました。 質問の仕方も教えていただいてありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問