HTML頁面中的繪製圖

-4

我喜歡在HTML頁面中繪製。該圖可能包含點，線，多邊形，圓形，月食等。這是最好的方法。我希望解決方案能夠在網站中快速加載。你能幫我解決一個例子嗎？HTML頁面中的繪製圖

2016-03-28 Pika Chu

SVG是一個很好的選擇，如下面答案中提到的。另一個選項是使用Canvas。 –

使用畫布意味着使用JavaScript，這意味着插件，這意味着更多的功能（如3D動畫）。但是SVG可以被CSS3操縱，這也意味着3D動畫等等。因此，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

HTML頁面中的繪製圖

回答

相關問題