ブログの説明

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

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

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

HTML5 Canvasで楕円を描く

この投稿ではHTML5 CanvasとJavaScriptを用いてHTMLドキュメントに楕円を描くスクリプティング方法について記す。

楕円形を描く

HTML5 Canvasの2Dを使って楕円を描くにはellipse()というメソッドを用いることができる。このメソッドの引数は次の順番に指定する。最後のオプションは反時計回りに描きたい場合にだけ指定するもの。

ellipse(1,2,3,4,5,6,7,8);
  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");

// 楕円を描く
Ctx.beginPath(); // パスの初期化
// 楕円メソッド(中心x,中心y,長軸半径,短軸半径,傾き,始点,終点)
Ctx.ellipse(100,60,80,50,toRadian(15),0,toRadian(360));
Ctx.lineWidth = 2; // 線の太さ
Ctx.strokeStyle = 'blue'; // 枠の色
Ctx.stroke(); // 線を描く
Ctx.fillStyle = 'skyblue'; // 塗りつぶす色
Ctx.fill(); // 塗りつぶす
</script>
</body>
</html>
HTML5 CanvasかJavaScriptに未対応か無効になっています。

上の楕円は楕円の長軸を右下に15度傾けたのでellipse()の第5引数に15と指定した。ただしellipse()の引数には角度を弧度法による単位ラジアンで指定する必要があるため、この15度を弧度法での値に直す必要があった。

toRadian()という函数は度数法の値を弧度法の値に変換するためのもの。度数法から弧度法への変換公式は次のとおり。

ラジアン=π180×角度

線の色はstrokeStyleというプロパティに=演算子を用いてカラーコードを代入することで指定することができる。塗りつぶす色はfillStyleというプロパティに代入して指定することができる。

次の楕円は傾きを0度にしたもの。枠の色は赤、塗りつぶす色は桃色にしてみた。

// 楕円を描く
Ctx.beginPath(); // パスの初期化
// 楕円メソッド(中心x,中心y,長軸半径,短軸半径,傾き,始点,終点)
Ctx.ellipse(100,100,80,50,toRadian(0),0,toRadian(360));
Ctx.lineWidth = 2; // 線の太さ
Ctx.strokeStyle = 'red'; // 枠の色
Ctx.stroke(); // 線を描く
Ctx.fillStyle = 'pink'; // 塗りつぶす色
Ctx.fill(); // 塗りつぶす
HTML5 CanvasかJavaScriptに未対応か無効になっています。

ellipse()の引数の値をいろいろ変えてみて楕円の描画がどのように変化するか試してみると引数がどのように機能するかを掴むことができる。

次の楕円は長軸の半径をもう少し長くしてみた。傾きには負の値-15度を指定してみた。枠の色は緑、塗りつぶす色は黄色とした。

// 楕円を描く
Ctx.beginPath(); // パスの初期化
// 楕円メソッド(中心x,中心y,長軸半径,短軸半径,傾き,始点,終点)
Ctx.ellipse(100,60,100,50,toRadian(-15),0,toRadian(360));
Ctx.lineWidth = 2; // 線の太さ
Ctx.strokeStyle = 'green'; // 線の色
Ctx.stroke(); // 線を描く
Ctx.fillStyle = 'yellow'; // 塗りつぶす色
Ctx.fill(); // 塗りつぶす
HTML5 CanvasかJavaScriptに未対応か無効になっています。

関連投稿

コメント

コメントを投稿

このブログの人気の投稿

LATEXで数式：指数と順列などで使う添数・添字

累乗（べき乗）で使われる指数（べき）など、右上に添えられる数や文字や記号はキャレット記号を用いて次のように表記することができる。添えられる数や文字や記号が複数に及んだり数式になる場合はそれらを{}で囲う必要がある。ちなみに、・は\cdotを、÷は\divを、≠は\neqをそれぞれ用い、分数は\frac{}{}で乗根は\sqrt[]{}で表すことができる。スペースを有効にするには\をスペースの前に付ける。 aのn乗an a^n a3=a⋅a⋅a a^3 = a \cdot a \cdot a am+n a^{m+n} 指数法則a0=1 (a≠0) a^0 = 1 \ (a \neq 0) 指数法則a1n=an a^{\frac{1}{n}} = \sqrt[n]{a} 指数法則amn=amn a^{\frac{m}{n}} = \sqrt[n]{a^m} 指数法則a−mn=1amn a^{-\frac{m}{n}} = \frac{1}{\sqrt[n]{a^m}} 指数法則aman=am+n a^m a^n = a^{m+n} 指数法則aman=1an−m (m<n) \frac{a^m}{a^n} = \frac{1}{a^{n-m}} \ (m < n) 指数法則(am)n=amn (a^m)^n = a^{mn} 指数法則(ab)n=anbn (ab)^n = a^n b^n 指数法則(ab)n=anbn \left(\frac{a}{b}\right)^n = \frac{a^n}{b^n} 指数法則\[ \frac{a^m}{...
続きを読む

LibreOffice 6 Calcでフォーム（ダイアログ）を作成してマクロで表示

イメージ
ここで用いたLibreOfficeのバージョンと設定 LibreOffice 6.1 LibreOfficeの「ツール」-「オプション」-「LibreOffice」の「詳細」で「Java実行環境を使用」にチェックが入っていること。「インストール済みのJava実行環境(JRE)」が表示されていること。 LibreOffice 6.1 Calcにはデータを入力したり表示したりするのに使うことができるフォームが用意されている。そしてそのフォームはダイアログと呼ばれている。今回はそのダイアログを作成し、それを表示させたり閉じたりするマクロをLibreOffice Basicを使って実装してみる。 フォームコントロールの作成 LibreOffice Calcを起動。 トップメニューで「表示」-「ツールバー」-「フォームコントロール」という順に選び、フォームコントロールのツールバーを表示させる。 フォームコントロールのツールバーの中から「ボタン」（プッシュ・ボタン）を選び、スプレッドシートの適当な場所にプッシュ・ボタンを作成して配置する。 作成されたプッシュ・ボタンの上でマウスの右クリックメニューを表示させ、その中から「コントロール」を選ぶ。 「属性 プッシュボタン」というダイアログが表示されるので、「全般」タブ内にある「タイトル」の項目を「ダイアログ表示」に変える。 トップメニューで「ファイル」-「保存」を選んで変更内容を保存する。 スプレッドシート上でのプッシュ・ボタンの作成とその属性の設定はこれで終わり。 ダイアログを作成 「閉じる」というコマンド・ボタンだけを持つ単純なダイアログを作成する。 LibreOffice Calcのトップメニューで「ツール」-「マクロ」-「ダイアログの管理」を選ぶ。 そうすると「LibreOffice Basicマクロの管理」というダイアログが開く。「ダイアログ」というタブを選び、ダイアログに表示されている.odsファイル（今開いているスプレッドシート名）を選ぶ。 「新規作成」ボタンを押して「Dialog1」を作成し、「編集」ボタンを押す。 そうすると統合開発環境(IDE)が起動し、ダイアログの雛形が表示されるはず。 ツールバーの中から「ボタン」（コマンド・ボタン）を選び、ダイアログの雛...
続きを読む

10の補数と9の補数と2の補数と1の補数

10進数と10の補数 10進法の四則演算に慣れている人なら算術的な直感で分かるのが10の補数。 算盤 そろばん を使っている人は10の補数と5の補数を出力する函数を会得しているかもしれない。 例えば、2に対して10の補数はいくつかと問われればそれは8だと分かるし、6に対して10の補数はいくつかと問われればそれは4だと分かるし、5に対して10の補数はいくつかと問われれば5だと直感的に分かる。 また、3に対して5の補数はいくつかと問われればそれは2だと分かるし、2に対して5の補数はいくつかと問われれば3だと分かる。 10の補数とは、ある自然数に対してそれにいくつの自然数を加えれば10になるのかという問いに答えたもの。自然数とは、ここでは0, 1, 2, 3, 4, 5, 6, 7, 8, 9のこと。 ある自然数xに対する10の補数yは次のように計算することによって答えることができる。 y=10−x 10進法の位取り記数法では、桁上がり（位上がり）が起こる数が10であるので、ある数にあといくつ足すと桁上がりが起こるかを理解していることは、その四則演算においてとても重要な暗記事項になっている。 10進法の四則演算に慣れた人の頭の中には次のような函数または対応表があるのかもしれない。 f(x)=10−x xは引数。「xに対する10の補数」を出力してくれる函数f(x)。 10の補数の対応表 10進数 10の補数 0 10 1 9 2 8 3 7 4 6 5 5 6 4 7 3 8 2 9 1 10 0 補数のこの対応表を見ると、数値を小さい順から並べた昇順と数値を大きい順から並べた降順との写像（マッピング）関係に見える。 10の補数と桁上がり 例えば、6+7=を計算するとき、人は6または7の補数を瞬時に思い浮かべ、加える数がそれを上回っている場合に桁上がりが起こると即座に認識するはず。つまり、6に対する10の補数である4を思い浮かべ、その4より大きい7から4を引いた数である3と10を足し合わせて答えを計算するかもしれない。 \begin{align*} 6 + 7 &= 7 -...
続きを読む