序文
HTMLは、ラベル要素とテキストで書かれたHTML文書は、ウェブブラウザとして記述することができ、マークアップ言語です。通常のWebページにページはHTML、これら3つの組み合わせを完了するためにCSSとJavaScript、HTMLページを担当した構造、スタイルのページ要素のレンダリングCSS、およびJavaScriptのスクリプトである場合には実装され、このようなユーザの行動に応じて、動的挙動を追加します。
それは、非常に難しいことですが、開発者は通常の状況下で達成するために、サードパーティ製のプラグインを使用する必要があり、現在のHTML5のcanvas要素は、線を描画するために導入することができるWeb図面上でよく知られている形状は、JavaScriptおよびその他の大規模によってページ上のテキストや画像を追加しますまだ見ることができますIE8のアプリケーションプロファイルの主流のブラウザのバージョン以下のように（いくつかのニーズを描くが、そのようなFirefox3.0 +、Chrome3.0 +サポートなどの互換性の問題は、まだありますが、IEは、開始後に、バージョン9.0でサポートされています広いです）。そのため、記事の下に描画を実現するために最も基本的な方法を使用する方法について説明します。
DOMはじめに
ここでは、動的にJavaScriptのグラフィックな方法によって生成されるため、実装の導入前に、標準のプログラミング・インタフェースのW3C推奨の治療拡張マークアップ言語（HTMLXML）で次のDOM（ドキュメントオブジェクトモデル）を、言及する必要があります対象組織がツリー構造モデルに文書化し、文書全体は、ノードの階層によってファイルにマッピングされ、オブジェクト指向の各オブジェクトファイルの挙動との関係を説明するための方法、ならびにこれらのオブジェクトのプロパティこのような動的に追加、削除、および様々な要素を変更するなど、オブジェクト、上のすべての操作のためのJavaScriptとHTML文書によってアクセスすることができます。
以下に示すように、各ブロックは、文書ノードである、合計で3つのノードを含み、ルートツリーは、文書（ドキュメント）ノード、文書の代表的な、要素（エレメント）であるノードが（テキストをHTMLに要素を表しますテキスト）ノードがテキストを表します。
ノードがツリー階層内の別のノードを有しているが、以下に示すように、<HTML>ノードは、ルートノードである<HEAD>であり、<BODY>はノード、それらが同じ親を持つ、兄弟ピアが属し、ように。
ここでは主に基づいており、これらの一般的な方法を達成するための方法をプロットし、あなたの参考のためにいくつかの一般的なDOMオブジェクトのメソッド、（詳細はウェブサイトW3school上で見つけることができます参照）です。
図形描画の基本的なプロセスは、個々のページの配置位置に所望の表示要素ノード含み添加します。
-
DOMノードを作成します。
var oDiv = document.createElement('div'); -
スタイルを追加：（スタイルオブジェクトのプロパティが設定されたスタイル/クラス外部ファイル定義されたスタイルの継承）
document.getElementById("id").style.property="值" object.className=classname -
ノード挿入:(親ノード/ノードの最後に挿入するDOMノードは、親ノードの兄弟の前に挿入されます）
document.body.appendChild(oDiv); //把div插入到body中，并且位于末尾 var oP = createElement('p'); //创建一个p节点 document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面 - レイアウト要素に使用される位置決め機構、我々はページのどこにでも現れることができるという要素、次の図に示すパラメータ値と使用位置の属性を確立するために、CSSのpositionプロパティ：配置位置を配置します。例えば、左のようなテキストを使用して、絶対絶対位置モード：100pxに;上部：150ピクセル、左ページから100pxにプレゼンテーションエレメント、ページ150ピクセルの上から。
サンプルコード
-
ブロック実装：ブロックの三行は1つの配置2 3絶対測位位置を測位要求に応じて配置されています。以下に示すようにHTMLやCSSコンテンツページ生成部は、rootPenはBTNフラットパターンの特性を継承し、そしていくつかのパラメータを再定義しました。
for (var k = 0; k < 3; k++) {//三行 topsize = 150*k; leftsize = 600 - 65*k; for (var j = 0; j < k+1; j++) {//每行k+1个方框 var divNewele = document.createElement('div'); divNewele.className = "btn-flat rootPen"//css文件定义样式 divNewele.style.position = 'absolute';//页面绝对定位 leftsize = leftsize+150; divNewele.style.left = String(leftsize)+ "px"; divNewele.style.top = String(topsize)+ "px"; parent.appendChild(divNewele); } } /* CSS方框样式 */ .btn-flat.rootPen { padding: 8px 8px 8px 1px; font-size: 13px; color: #1a2129; text-align: center; width: 80px; height:60px; margin-top: 1%; background: #e6ebf3; border: 1px solid #d8dde4; box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 0px 0px #cccccc; } .btn-flat.rootPen:active { background: #e0e6ef; -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset; -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset; box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset; } .btn-flat.rootPen i { font-size: 14px; }
-
ケーブル実現：原理と同じの実装ボックスが、ページ要素はブロック形式で表示されると、すべてが始まることから、スタイルが異なるが、その後、回線を接続する際に、我々はCSSのプロパティ値を変更する必要が実現し、水平表示幅の値0PXは、垂直表示高さが0PXである場合、です。
/* CSS画线 */ .line{ border:3px solid #000000; margin-left:20px; position:absolute; } .horLine { height:0px; } .verLine { width:0px; } - テキストが実装：表示するテキストノードは、ブロック内のブロック内のテキスト要素はcreateTextNodeを追加していくことができます。
概要
次のように最終的に複数描画簡単に集中必要があるが、広い（特にIE8対応）ブラウザの互換性のあるバージョン方式の図面に基づいて、トポロジーをブロックする、この方法の主な欠点は、必要です事前に各要素の配置位置を算出し、以下でより複雑な陰影をレンダリングする、負荷が大きい曲線です。また、IE8の現在の制限のキャンバスは、オープンソースプロジェクトのExplorerCanvasによって解決することができ、フォローアップ方法を説明します。
