投稿

ラベル（Canvas）が付いた投稿を表示しています

ブログの説明

学校に通わないで学んだことを記しています。間違っているところが何かありましたらご指摘下さると幸いです。コメントに対する返信が遅れる可能性があります。その場合は申し訳ありません。

このブログではサイドバーに広告を表示しています。このブログ内の投稿記事を検索するには右上の拡大鏡のアイコンを、アーカイブやラベル付けから投稿記事を閲覧するには左上の三重線のアイコンをクリックして下さい。

数式の表示にはMathJaxを利用させていただいています。数式の表示のためにJavaScriptが有効である必要があります。そうでない場合、訳の分からないLatexのコードが表示されます。幾何学図形やチャートの表示にはHTML5 CanvasやGoogle Chartを使用しています。その表示のためにもJavaScriptが有効である必要があります。

HTML5 Canvasで矢印を描いてみた（三角関数を利用）

この投稿ではHTML5 Canvasの2次元コンテキストのAPIを利用して矢印を描くJavaScriptのコードを書いてみた。 ここで描く図は次のようなもの。 このウェブブラウザはHTML5 CanvasかJavaScriptに対応していません。 たったこれだけ。にもかかわらずコードのほうはオブジェクト指向の体裁になるように汎用性を多少持たせてやや大げさに設計してみた。これを更に発展させれば低次元のベクトル空間を描けるものになるかもしれない。 HTMLのcanvas要素 矢印を描くためにHTML5 Canvasの2次元コンテキストのAPIを利用するので、HTML文書のbody要素内にcanvas要素を記述しておく必要があった。それは例えば次のようになる。 <canvas id="arrow" width="250" height="250"> このブラウザはHTML5 CanvasかJavaScritが有効ではありません。 </canvas> canvasタグのid属性にはこのcanvas要素を一意に特定するための名前を指定する。ここではarrowとした。 widthはキャンバスの幅。heightはキャンバスの高さ。 HTML5 Canvasが有効でないときにはcanvasタグに挟まれた部分の文字列が表示される。 JavaScriptのコード JavaScriptのコードはscriptタグで挟んだscript要素内に記述する。script要素はHTML文章のbody要素の後に置くことが望ましい。少なくともcanvas要素の後である必要がある。 </body> <script> // JavaScriptのコード </script> </html> そうでなければ、例えばcanvas.jsと名付けた別のファイルに保存し、HTML文書内から次のように呼び出すこともできる。 <script type="text/javascript" src="arrow.js"></script> 矢印オブジェクトを返すファクトリ函数 まず矢印オブジェク...
コメントを投稿
続きを読む

JavaScriptでオブジェクトを作成する方法

オブジェクト指向言語には大きく分けてクラス・ベースのものとプロトタイプ・ベースのものとがある。JavaScriptはプロトタイプ・ベースのオブジェクト指向としての特徴を備えているとされている。 オブジェクトとは、関連する変数や函数をまとめて名前を付けた参照型の変数のことであり、オブジェクト型変数とも呼ばれている。 JavaScriptでプログラマーが独自にオブジェクトを作るには、 オブジェクト・リテラル、 ファクトリ函数、 Object()コンストラクター、 コンストラクター函数、 クラス構文、 継承 などを用いる方法がある。それぞれについて見ていく。ただし継承についてはこの投稿では触れない。 オブジェクト・リテラル 関連する変数や函数であるプロパティの定義を列挙したオブジェクト・リテラルを変数に代入するとJavaScriptでは簡単にオブジェクトを作ることができる。この方法はオブジェクト・イニシャライザーとも呼ばれている。 ただしこの方法では1つのオブジェクト・リテラルから1つのオブジェクトしか作ることができない。 オブジェクト・リテラルの構文はJSON(JavaScript Object Notation)やPythonの辞書型のそれに似ている。すなわち「{キー:値,キー:値,...}」のようにコーディングし、そのオブジェクト・リテラルを変数に代入するだけでオブジェクトが1つ作られる。オブジェクト・リテラルではこのキーがプロパティ名やメソッド名になる。 オブジェクト・リテラルは次のようにコーディングする。 キーワード 変数名 = { プロパティ名1 : 値, プロパティ名2 : 値, プロパティ名3 : 値 }; キーワードにはletかconstかvarを指定することができる。 プロパティの値に函数式を与えるとそのプロパティはメソッドになる。メソッドは特別な値を持ったプロパティ。メソッドはコード・プロパティとも呼ばれることがある。 キーワード 変数名 = { プロパティ名 : 値, メソッド名 : function(仮引数){} // 函数式 }; 変数に代入されるかプロパティの値に与えられる函数の定義方法は函数式とか函数リテラルと呼ばれている。それに対して独立した函数の定義方法は函数宣言とか...
コメントを投稿
続きを読む

HTML5 Canvasで写像ダイアグラム（写像図）を描く

HTML5 CanvasとJavaScriptを用いてHTMLドキュメントに数学の写像ダイアグラム（写像図）を描いてみた。この投稿はその備忘録。 HTML5 CanvasかJavaScriptに未対応か無効になっています。 写像ダイアグラムを描きたいHTMLドキュメント内の場所にcanvas要素を埋め込む必要がある。そのcanvas要素は例えば次のように記す。その際にid属性を指定することを忘れずに。HTML5 Canvasはこのidを受け取る。 <canvas id="mapping" width="200" height="200"> HTML5 CanvasかJavaScriptに未対応か無効になっています。 </canvas> canvas要素のwidthとheightという属性はキャンバスの幅と高さを指定するもの。このサイズを適切に指定しないと描かれたオブジェクトがはみ出して見えなくなってしまうことがある。 楕円オブジェクト HTML5 CanvasかJavaScriptに未対応か無効になっています。 HTML5 Canvasを使って楕円を描くためにはellipse()というメソッドを用いることができる。このメソッドの引数は次の順番に指定する。オプションは省略することができる。 ellipse(1,2,3,4,5,6,7,8); 楕円の中心の水平座標を指定。 楕円の中心の垂直座標を指定。 楕円の水平軸半径を非負の値で指定。 楕円の垂直軸半径を非負の値で指定。 楕円の水平軸の傾きを弧度法で指定。 パスの始点を弧度法で指定。 パスの終点を弧度法で指定。 【オプション】楕円を描くパスの方向を反時計回りにしたい場合にtrueと指定。 ただしellipse()メソッドは古いウェブブラウザでは対応していない場合があるので要注意。 次のJavaScriptのコードではコンストラクタ函数によって楕円クラスのようなものを定義している。そしてそれをインスタンス化して各々の楕円オブジェクトを作成し、コンストラクタ函数の中で定義した描画メソッドを呼び出すことで楕円を描くようにしている。 <script> // 楕円のコンストラク...
コメントを投稿
続きを読む

HTML5 Canvasで楕円を描く

この投稿ではHTML5 CanvasとJavaScriptを用いてHTMLドキュメントに楕円を描くスクリプティング方法について記す。 楕円形を描く HTML5 Canvasの2Dを使って楕円を描くにはellipse()というメソッドを用いることができる。このメソッドの引数は次の順番に指定する。最後のオプションは反時計回りに描きたい場合にだけ指定するもの。 ellipse(1,2,3,4,5,6,7,8); 楕円の中心の水平座標を指定。 楕円の中心の垂直座標を指定。 楕円の長軸半径を非負の値で指定。 楕円の短軸半径を非負の値で指定。 楕円の長軸の傾きを弧度法で指定。 パスの始点を弧度法で指定。 パスの終点を弧度法で指定。 【オプション】楕円を描くパスの方向を反時計回りにしたい場合にtrueと指定。 ただしHTML5 Canvasの2Dのellipse()メソッドは古いウェブブラウザでは対応していない場合があるので要注意。 楕円を描くためのHTMLとJavaScriptのソースコードは次のとおり。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>楕円を描く</title> </head> <canvas id="myEllipse" width="200" height="200"> HTML5 CanvasかJavaScriptに未対応か無効になっています。 </canvas> <script> // 角度をラジアンに変換する函数 function toRadian(degrees){ return Math.PI / 180 * degrees; } // HTML5 Canvasを利用する手続き const canvas = document.getElementById("myEllipse") const ctx = canvas.getContext("2d"); // ...
コメントを投稿
続きを読む

HTML5 CanvasとJavaScriptで折線グラフを描いてみた

使用した環境は次のとおり。 Chromium Version 90.0 Firefox Browser 78.13.0esr ECMAScript 6 (2015)以降 ECMAScriptはJavaScriptの標準規格。そのバージョンの6以降または2015以降では変数の宣言にletというキーワードが導入された。定数の宣言にはconstというキーワードが導入された。ただしletは予約語ではない。この投稿で掲載するJavaScriptのコードではletとconstを用いた。 JavaScriptにおける変数の詳細についてはまた別の機会に。 HTML5 Canvasで描いた折線グラフ 日本のマクロ経済データの1つであるインフレ率を1960年から2020年まで時系列に折線グラフにしたものが次の図。 このブラウザはHTML5 CanvasかJavaScriptをサポートしていません。 スクリプト言語JavaScriptとHTML5 Canvasの2次元用レンダリングのAPIを利用して今回はこの折線グラフを描いてみた。 HTML HTML5 Canvasを表示するために用意しておくHTML文書の基本的内容は次のとおり。 <!DOCTYPE html> <html> <head> <title>日本のインフレ率の折線グラフ</title> </head> <body> <!-- canvas要素にはid属性と幅と高さを設定する --> <canvas id="JapanInflationRateTimeSeries" width="700" height="400"> このブラウザはHTML5 CanvasかJavaScriptをサポートしていません。 </canvas> </body> <script> <!-- ここにJavaScriptのコードを書く --> </script> </html> ウェブ・ブラウザによってscript要素が最後に読み込まれることを期待してscript要素をbody要素の...
コメントを投稿
続きを読む