htmlページの描画図

-4

私はHTMLページを描きたい。ダイアグラムには、ドット、線、ポリゴン、円、日食などが含まれている可能性があります。これを行う最良の方法はどれですか。私はソリューションがウェブサイトに非常に高速にロードされるようにしたい。あなたが例の解決策で助けてくれますかhtmlページの描画図

出典

2016-03-28 Pika Chu

SVGは、以下の回答に記載されているように、良いオプションです。他のオプションは、Canvasを使用しています。 –

キャンバスの使用は、プラグインを意味するJavaScriptを使用することを意味します。これは、より多くの機能（3Dアニメーションなど）を意味します。しかし、SVGは3Dアニメーションなどを意味するCSS3によって操作することができます。したがって、SVGは、ほとんどすべてのブラウザ（それはW3C標準です）ですぐに実行できるので、より良いオプションです。 – 4castle

SVG (Scalable Vector Graphic)を使用してください。それはまさにあなたが探しているものなのです。あなたはすでに描かれているものを表示したい場合は

<svg width="500" height="200"> 
 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
 
    <rect x="100" y="10" width="50" height="50" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> 
 
    <ellipse cx="250" cy="60" rx="100" ry="50" style="fill: yellow; stroke:purple; stroke-width: 2" /> 
 
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> 
 
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> 
 
    <text x="200" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> 
 
</svg>

出典

2016-03-28 04:57:54 4castle

プレーンSVGは良い解決策です。

一方、ユーザーが独自の図面を作成したい場合、図を描画するように設計されたライブラリを使用する方がはるかに簡単です。このようなライブラリはSVGまたはCanvasを内部的に使用できますが、SVGまたはCanvasを学習する必要がないため、あまり重要ではありません。

このようなライブラリの例は、私が作成したもの、GoJSです。例：http://gojs.net/latest/samples/index.htmlを参照してください。

出典

2016-03-29 04:36:30

答えて

関連する問題