非公開：JavaScriptで三角形を描く

[PR]

JavaScriptで三角形を描く

　スタイルシートのボーダー要素を利用して三角形を描く方法、というのを試してみた。ネタ元はReal-Time 3D in Javascript。
　なんせ元が英文なので詳しい仕組みはよくわからんのだが、要するに太さの異なるsolidなborder要素の境界にできる斜線を利用する、ということらしい。

　で、right_angledTriangleという関数を作ってみた。矩形のdiv要素を斜めに割って直角三角形に見せる、というもの。
　引数は一つのオブジェクトで指定。targetに直角三角形を表示するエレメントを、leftとtopに直角部分の位置をピクセル単位の数値で、baseとheightに底辺と高さをピクセル単位で（マイナス指定可）、colorに位置指定した側の直角三角形の色を、backgroundにその反対側の色を、それぞれ指定する。
　ただしIE6以下では色指定にtransparentを指定できない。ああ、これは致命的。またIEか。
　ネタ元にさせていただいたサイトでは何やら上手いことやっているみたいだが、そのカラクリがよくわからん。どうやら色の置き換えらしきことをやっているらしいのだけど、この件はとりあえず保留。

　ついでにワイプアウト処理の関数をやっつけででっちあげてみる。リアルタイム処理のテストと併せてサンプルを作ってみた。
　こんな感じ。
　まあワイプアウトとはいっても色指定にtransparentを指定できないのであまり利用価値はない。

　ソースは、うーん、何度見てもヒドいもんだ。汎用性などカケラもナシ。
　計画性もなくただ思いつくままに行き当たりばったりでコードを重ねていくとこういうことになる、という悪い見本市。文学的プログラミングの真骨頂。冗長とはまさにこのこと。
　とりあえずこのサンプルは、記念碑的意味合いを込めて、保存しておくことにする。