[Web Chartシリーズの1つ(続き)]Web側のグラフィック描画SVG,VML,HTML 5 Canvasの簡単な例
4506 ワード
前書き本編では、[Web Chartシリーズの1つ]Webエンドグラフィック描画SVG,VML,HTML 5 Canvas技術比較に続く
の補足と例は、様々な技術の使用方法を説明する.
VMLの使用方法と例
ネーミングスペースを導入すると、ラベルで直接グラフィックを描くことができます.
次の例では、座標(20,20)から座標(200)までの直線を描画します.
比較的良い学習資料:
1 . http://msdn.microsoft.com/zh-cn/library/bb263897.aspxMSDN上のVML学習資料
2. http://www.itlearner.com/code/vml/index.html比較的簡単で明確な中国語入門チュートリアル
3. http://www.dynamicdrive.com/dynamicindex11/editor.htmオンラインでVML図を描くエディタで、グラフィックの描画が完了すると、対応するXML Codeを生成することができる.
SVGの用法及び例
SVGがHTMLで使用する方法は2つあります.
1.VMLと同様に、ネーミングスペースをインポートした後、svgラベルを直接使用します.(この方式は使用できないというチュートリアルもありますが、svgの発展がこの方式をサポートしていると思います)
2.SVGは、先に描画する図形を接尾辞名として保存する.svgのファイルをHTMLドキュメントに埋め込みます.
次の3つのラベルを同じ方法で埋め込むことができます.
1).
2).
の補足と例は、様々な技術の使用方法を説明する.
VMLの使用方法と例
ネーミングスペースを導入すると、ラベルで直接グラフィックを描くことができます.
次の例では、座標(20,20)から座標(200)までの直線を描画します.
<HTML xmlns:v = "urn:schemas-microsoft-com:vml">
<HEAD><TITLE>VML Example</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<body>
<v:line from="20,20" to="200,200"></v:line>
</body>
</html>比較的良い学習資料:
1 . http://msdn.microsoft.com/zh-cn/library/bb263897.aspxMSDN上のVML学習資料
2. http://www.itlearner.com/code/vml/index.html比較的簡単で明確な中国語入門チュートリアル
3. http://www.dynamicdrive.com/dynamicindex11/editor.htmオンラインでVML図を描くエディタで、グラフィックの描画が完了すると、対応するXML Codeを生成することができる.
SVGの用法及び例
SVGがHTMLで使用する方法は2つあります.
1.VMLと同様に、ネーミングスペースをインポートした後、svgラベルを直接使用します.(この方式は使用できないというチュートリアルもありますが、svgの発展がこの方式をサポートしていると思います)
<HTML xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
</BODY>
</HTML>
2.SVGは、先に描画する図形を接尾辞名として保存する.svgのファイルをHTMLドキュメントに埋め込みます.
次の3つのラベルを同じ方法で埋め込むことができます.
1).
2).