投稿

2月, 2022の投稿を表示しています

ブログの説明

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

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

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

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"); //