Webページ上で図形を描画する
Webページ上の描画を担うのはクライアントプログラム(ブラウザ)のレンダリングエンジン.
ここに詳しく載っているが,レンダリングの大雑把な流れとしては,
1. ドキュメント(HTML, CSS)を解析してツリー構造(DOMツリー,CSSOMツリー)を作成する.
2. その過程で同時に,描画されるコンテンツの順序構造を表すレンダーツリーを構築する.
3. レンダーツリーのノードに画面上の座標を割り当てる(レイアウト).その後,ツリーの基づき描画を行う.
ブラウザはメインスレッドでループを回しており,レンダリングはイベントに応じて適宜行われる.が,上の1~3が全て実行されるわけではない(高負荷になるから).例えばユーザーがブラウザをスクロールする場合はコンテンツの表示位置が変わるのでレイアウトをし直す必要があるが,レンダーツリーは再利用される.一方,動的にコンテンツが変更される場合はレンダーツリーを作り直さなければならないが,コンテンツの序列がツリーに反映されているため,変更による影響をツリーの一部に抑えることが出来る.
Webページ上で図形を(動的に)描画する方法としては,HTMLでsvg,canvas要素などを用いることがある.
SVG
ベクター形式の画像形式で,XMLを用いて記述される.主要なブラウザで表示でき,HTMLでも直接サポートされている.
<svg>タグでは,width, height 属性で画面上の表示サイズを指定することが出来る.同時に,viewBox 属性で表示する座標領域を指定する.なにか似ていてややこしいが,svgにおける座標平面を画面にビューポート変換する際の前後領域を指定しているものと考えればよいと思う(svg平面のviewBoxで指定された領域を,width・heightで指定される画面領域に射影する).ただし,デフォルトではアスペクト比が保持されるように変換される.これはpreserveAspectRatio属性で指定できる.
そして,<line>や<text>といった要素が描画機能として提供される.
例:
<svg width="300px" height="300px" viewBox="-100 -100 200 200"> <circle cx="50" cy="50" r="50" fill="#777777" id="circ1" /> <line x1="-50" y1="-100" x2="50" y2="100" stroke="#002200" id="line1" /> </svg>
svgについてはここのチュートリアルがとても参考になる:
www.petercollingridge.co.uk
Canvas
ラスタ形式の画像を描画するには<canvas>要素を使うことが出来る.canvas自体はwidthとheightの属性を持つ単なる描画領域で,スクリプトによりこの領域に描画を行うことになる.Javascriptで描画を行う場合,描画コンテクスト(context)と呼ばれるインターフェースを通して描画を行う必要がある(低レベルに領域の値を直接操作することは多分できない).
描画コンテクストとしては2D描画用のCanvasRenderingContext2Dと,主に3D描画用のWebGLがある.恐らく内部実装は全く異なるんじゃないかと思う.
例:
<canvas id="tutorial" width="100" height="100"></canvas> <script type="text/javascript"> (function (){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ // CanvasRenderingContext2D var ctx = canvas.getContext('2d'); ctx.fillRect(10, 10, 90, 90); } })(); </script>
[REF]
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
canvas チュートリアル - ウェブデベロッパーガイド | MDN