HTML5 の canvas で線分を引く

HTML5 の canvas で 線分を引く

では早速、canvas で線分を引いてみる。

これは原点(0, 0)から x 軸方向(0, 100) の線分と、同じく原点から y 軸方向　(100,0) にグラフを引いてみた画面だ。 私たちがみる座標系は、原点から x の正方向は右に伸びていて、y の正方向は上に伸びている。 一方、コンピュータの座標系は、x の正方向が右に伸びているのは同じだが、y の正方向は下に伸びている。 ここで自分たちの常識が覆されてしまう。

そこで考えられる方法としては、最初から座標変換を定義しておくことが考えられる。 人間が定義した上向きの線分を自動的に y 軸のマイナス方向とする方法だ。 そのとき、変換行列を定義しておく。 変換後の座標`(x,y)`における点が変換前の座標では`(x',y')`に相当すると考える。 このとき、座標軸変換は射影座標を導入して次の行列で表される.

`((x'), (y'), (1)) = ((a,c,e),(b,d,f),(0,0,1))((x), (y), (1))`

座標軸の変換は一般にこの3×3行列, つまりa〜fの6つの数値として表すことが出来る.

では早速、canvas で線分を引いてみよう。`(a, b, c, d, e, f) = (1, 0, 0, 0, -1, 0)` としたのが右の図である。 ところがどうだろう、垂直線が上に伸びるどころか、消えているではないか。 これは、キャンパスからはみ出て y 軸が負の方向に伸びたからである。したがって、原点は `y = 100` のところに持ってこないといけない。

上記の失敗を教訓に、こんどは変換行列を `(a, b, c, d, e, f) = (1, 0, 0, 0, -1, 100)` と改良してみた。 垂直線が復活し、しかももとの方向に伸びている。よかった、めでたしめでたし、と手放しで喜ぶわけにもいかない。というのは X 座標は原点から右に伸びているので、 マイナス領域を表すことができない。ということは、X 方向にもあらかじめ 100 平行移動するのがいいだろう。そうすれば、正負が対等に扱える。

変換行列を `(a, b, c, d, e, f) = (1, 0, 100, 0, -1, 100)` をさらに改良した図である。 垂直線が復活し、しかももとの方向に伸びている。よかった、めでたしめでたし、と手放しで喜ぶわけにもいかない。というのは X 座標は原点から右に伸びているので、 マイナス領域を表すことができない。ということは、X 方向にもあらかじめ 100 平行移動するのがいいだろう。そうすれば、正負が対等に扱える。

線の種類

ひとくちに線といっても、実線のほか、点線、破線、一点鎖線、二点鎖線、二重線などいろいろある。まずは、点線の出し方を覚えておきたい。 数学で開集合を意味する図を書くときに、境界が実線で囲まれていたら閉集合を、点線で囲まれていたら開集合をそれぞれ想定するものだからだ。