投稿

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

ブログの説明

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

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

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

JavaScriptで幾何学模様を描いてみた

14個とも全て同じコードによって描いた。たった1つのパラメーターの値を変えるだけで同じコードから様々な幾何学的模様が作図できた。これらはその一部の例。 Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported Canvas not supported なんで同一コードからこのように異なる模様が出来上がるのかは理解できない。ちょっと不思議。 幾何学模様を描く 1から360までの間の整数値を入力して描画ボタンを押してみてください： 描画 Canvas not supported
コメントを投稿
続きを読む

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"); // ...
コメントを投稿
続きを読む

Google Chartsを利用してHPやブログにチャート（グラフ等）を描く方法

ブログなどのウェブ・ページに自分の意見や主張や考えを掲載するときにそれを裏付けるデータがあると説得力が増すかもしれない。そのデータをチャートとして描いて視覚化できれば尚更。 その場合、一般的なのはそれを専門にしている表計算アプリを使うこと。表計算ソフトウェアにはデータを各種チャートの形にして視覚化してくれる機能が大抵備わっている。LibreOfficeのCalcの場合、そのチャートをコピーしてInkscape上に貼り付けることができる。それをPNG形式の画像やSVG形式の画像として保存し、それをウェブ・ページに掲載する方法がある。 他の選択肢としては、HTML5 CanvasやJavaScriptのライブラリを使う手がある。データを視覚化してくれるJavaScriptのライブラリが最近では数え切れないくらい多くある。 今回はGoogle Chartsのライブラリを利用させていただいた。その手順についてこの投稿に書き留める。 2種類のチャートの完成図 同じデータ・セットで2種類のチャートを作ってみた。その完成図が次のとおり。 Google Chartsが有効ではありません。このページを再読み込みをすると有効になることがあります。 1つ目のチャートは日本のマクロ経済のインフレ率の時系列データを折線グラフにしたもの。 2つ目のチャートは同じ時系列データを縦の棒グラフにしたもの。棒グラフだと0に近い値が見えなくなってしまっているためか、そこにマウスのポインタを合わせても値を表示してくれるイベント処理が機能しない。 Google Chartsが有効ではありません。このページを再読み込みすると有効になることがあります。 これらのチャートを描くためのコードをHTMLから順に説明する。 HTMLのコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Chartでチャートを描いてみた</title> <!-- loader.jsを読み込む --> <script src="https://www.gstatic.co...
コメントを投稿
続きを読む