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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

javascriptのエラー(Uncaught TypeError: Cannot read properties of null (reading 'getContext'))が消えません

gubi.m
gubi.m

総合スコア13

canvas

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0リアクション

1クリップ

866閲覧

投稿2022/06/04 13:08

javascriptのエラーを解決できず、原因がわかれば教えていただきたいです。
下記サイトを真似して書いており、jsの最初の4行は別のサイトで調べたcanvasのサイズ指定の内容です。
このサイトのjsをそのままコピペして使っても、同じエラーになってしまうので、このサイトが違っているのか、他の部分で違っているのか分からず困っています。
https://tsuyopon.xyz/2018/09/14/how-to-create-drawing-app-part1/

何卒、よろしくお願いいたします。

【html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <h1>読み込みテスト</h1> <h1>お絵描きアプリ</h1> <div class="canvas_wrapper"> <canvas id="canvas draw_area"></canvas> </div> <div><button id="clear_button"></button></div> 引用テキスト <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="../js/script.js"></script> </body> </html>
【js】 //canvasのサイズ指定(canvasにはwidthとheightの属性が設置されていない) var w = $('.canvas_wrapper').width(); var h = $('.canvas_wrapper').height(); //対象要素.attr(属性, (変更する値)) $('#canvas').attr('width', w); $('#canvas').attr('height', h); //①絵を描くために必要な情報の定義 window.addEventListener('load', function(){ const canvas = document.getElementById('#draw_area'); //描画機能を有効にする const context = canvas.getContext('2d'); //直前のマウスのcanvas上のx座標とy座標を記録する const lastPosition = { x: null, y: null };//nullは「何もない」「値が存在しない」という意味 //マウスがドラッグされているか(クリックされたままか)判断するためのフラグ let isDrag = false;//なぜtrueではない? //②お絵描きアプリに必要な機能(関数)の定義を行なっている //絵を描く function draw(x, y){ if(!isDrag){ //マウスがドラッグされていなかったら処理を中断する return;//空のreturn文は、『undefined』を返す。関数ブロック内で処理を途中で終了したい時に使用する } //線の状態を定義する context.lineCap = 'round';//先端の形状を、丸いラインキャップにする。初期値はbutt(ラインキャップなし) context.lineJoin = 'round';//線の接合箇所を丸くする。初期値はmiter(面取りしない) context.lineWidth = 5;//線の太さ context.strokeStyle = 'black';//色。色・グラデーション・パターン値のいずれかを指定(初期値は#000) //書き初めは、lastPosition.x, lastPosition.yの値はnullとなっているため、クリックしたところを開始点としている(←!?) //lastPosition.xとlastPosition.yに現在のx,yを記録することで、次にマウスを動かした時に、前回の位置から現在の位置まで線を引くようになる(!?) if(lastPosition.x === null || lastPosition.y === null){ //ドラッグ開始時の線の開始位置 context.moveTo(x,y); } else{ //ドラッグ中の線の開始位置 context.moveTo(lastPosition.x, lastPosition.y); } //context.moveToで設定した位置から、context.lineToで設定した位置までの線を引く。 // - 開始時はmoveToとlineToの値が同じであるため、ただの点となる。 // - ドラッグ中はlastPosition変数で前回のマウス位置を記録しているため(!?)、前回の位置から現在の位置までの線(点のつながり)となる context.lineTo(x,y); //context.moveTo,context.lineToの値を元に実際に線を引く context.stroke(); } });

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

canvas

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。