H5中的SVG

SVG

首先我們要知道什麼是SVG,SVG是指可伸縮矢量圖形,可用於定義用於網絡的基於矢量的圖形,可使用 XML 格式定義圖形。並且SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失,SVG還是萬維網聯盟的標準。SVG與其他的圖像格式相比,它的優勢在於:1、SVG 圖像可通過文本編輯器來創建和修改;2、SVG 圖像可被搜索、索引、腳本化或壓縮;3、SVG 是可伸縮的;4、SVG 圖像可在任何的分辨率下被高質量地打印;5、SVG 可在圖像質量不下降的情況下被放大。
接下來舉幾個例子在SVG中繪製圖形:
ex:這個就是畫一條直線開始的座標和結束的座標。這個也是畫線,不過這個是一筆化成一個五角星。
然後是多邊形:



這個也是蠻簡單的,就把三角形的三個點的座標找到就好了。
然後我們畫個橢圓:

橢圓的話給它設置兩個圓心座標就好了。
畫矩形的話:因爲只有HTMLDOM標籤纔有直接可以賦值的屬性,SVG標籤屬於沒有納入HTMLDOM規範,所以對SVG標籤的js動態設置屬性,需要使用核心DOM的API
ex:var rect = document.createElementNS(“http://www.w3.org/2000/svg”,“rect”);
rect.setAttribute(“width”, 100);
rect.setAttribute(“height”, 100);
rect.setAttribute(“x”, i100);
rect.setAttribute(“y”, j
100);
這樣子的話就可以畫出一個矩形了。
最後舉一個動態添加圓形的例子:
ex:
var c = document.createElementNS(“http://www.w3.org/2000/svg”, “circle”);
c.setAttribute(“r”, rn(5,100));
c.setAttribute(“cx”, rn(0,600));
c.setAttribute(“cy”, rn(0,400));
c.setAttribute(“fill”, rc(0,256));
c.setAttribute(“fill-opacity”, Math.random());
svg1.appendChild( c );
首先我們要創建半徑,然後設置一下圓心的座標,然後給圓填充一下顏色,設置一下透明度,最後把圓添加進去就好了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章