日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML5中SVG2D圖形繪制

基本形狀

成都創(chuàng)新互聯(lián)專注于正安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供正安營銷型網(wǎng)站建設(shè)，正安網(wǎng)站制作、正安網(wǎng)頁設(shè)計(jì)、正安網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造正安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供正安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

SVG提供了很多的基本形狀，這些元素可以直接使用，這一點(diǎn)比canvas好多了。廢話不說了，直接看例子，這個(gè)最直接：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.   
    6. 
  
  
  
  
  6.   
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9.   
  
  
  
  
  10.       stroke="orange" fill="transparent" stroke-width="5"/>
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.   
  
  
  
  
  13.       stroke="green" fill="transparent" stroke-width="5"/>
    14. 
  
  
  
  
  14. 
  
  
  
  
  15.   
    16. 
  
  
  
  
  16.

這段HTML顯示的結(jié)果如下：

這個(gè)例子畫了很多形狀：正常的矩形，帶圓角的矩形，圓形，橢圓形，直線，折線，多邊形，還有路徑。這些都屬于基本的圖形元素。雖然繪制一個(gè)圖形有很多種方式，比如矩形可以用rect實(shí)現(xiàn)，也可以用path等實(shí)現(xiàn)，但是我們還是應(yīng)該盡量保持SVG的內(nèi)容短小精悍，易于閱讀。

下面是每個(gè)形狀的使用說明(這里只介紹控制圖形形狀和位置的基本屬性，填充等屬性放到后面總結(jié))。

矩形 - rect元素

這個(gè)元素有6個(gè)控制位置和形狀的屬性，分別是：

x：矩形左上角的坐標(biāo)(用戶坐標(biāo)系)的x值。

y：矩形左上角的坐標(biāo)(用戶坐標(biāo)系)的y值。

width：矩形寬度。

height：矩形高度。

rx：實(shí)現(xiàn)圓角效果時(shí)，圓角沿x軸的半徑。

ry：實(shí)現(xiàn)圓角效果時(shí)，圓角沿y軸的半徑。

比如上面例子中，實(shí)現(xiàn)了圓角效果，你也可以通過設(shè)置rx,ry為不同的值實(shí)現(xiàn)橢圓角效果。

圓 - circle元素

這個(gè)元素的屬性很簡單，主要是定義圓心和半徑：

r：圓的半徑；cx：圓心坐標(biāo)x值；cy：圓心坐標(biāo)y值。

橢圓 - ellipse元素

這個(gè)是更加通用的圓形元素，你可以分別控制半長軸和半短軸的長度，來實(shí)現(xiàn)不同的橢圓，很容易想到，當(dāng)兩個(gè)半軸相等時(shí)，就是正圓形了。

rx：半長軸(x半徑)；ry：半短軸(y半徑)；cx：圓心坐標(biāo)x值；cy：圓心坐標(biāo)y值。

直線 - line元素

直線需要定義起點(diǎn)與終點(diǎn)即可：

x1：起點(diǎn)x坐標(biāo)；y1：起點(diǎn)y坐標(biāo)；x2：終點(diǎn)x坐標(biāo)；y2：終點(diǎn)y坐標(biāo)。

折線 - polyline元素

折線主要是要定義每條線段的端點(diǎn)即可，所以只需要一個(gè)點(diǎn)的集合作為參數(shù)。

points：一系列的用空格，逗號(hào)，換行符等分隔開的點(diǎn)。每個(gè)點(diǎn)必須有2個(gè)數(shù)字：x值和y值。所以下面3個(gè)點(diǎn) (0,0), (1,1)和(2,2)可以寫成："0 0, 1 1, 2 2"。

多邊形 - polygon元素

這個(gè)元素就是比polyline元素多做一步，把最后一個(gè)點(diǎn)和第一個(gè)點(diǎn)連起來，形成閉合圖形。參數(shù)是一樣的。
points：一系列的用空格，逗號(hào)，換行符等分隔開的點(diǎn)。每個(gè)點(diǎn)必須有2個(gè)數(shù)字：x值和y值。所以下面3個(gè)點(diǎn) (0,0), (1,1)和(2,2)可以寫成："0 0, 1 1, 2 2"。

路徑 - path元素

這個(gè)是最通用，最強(qiáng)力的元素了；使用這個(gè)元素你可以實(shí)現(xiàn)任何其他的圖形，不僅包括上面這些基本形狀，也可以實(shí)現(xiàn)像貝塞爾曲線那樣的復(fù)雜形狀；此外，使用path可以實(shí)現(xiàn)平滑的過渡線段，雖然也可以使用polyline來實(shí)現(xiàn)這種效果，但是需要提供的點(diǎn)很多，而且放大了效果也不好。這個(gè)元素控制位置和形狀的只有一個(gè)參數(shù)：d：一系列繪制指令和繪制參數(shù)(點(diǎn))組合成。

繪制指令分為絕對坐標(biāo)指令和相對坐標(biāo)指令兩種，這兩種指令使用的字母是一樣的，就是大小寫不一樣，絕對指令使用大寫字母，坐標(biāo)也是絕對坐標(biāo)；相對指令使用對應(yīng)的小寫字母，點(diǎn)的坐標(biāo)表示的都是偏移量。

絕對坐標(biāo)繪制指令

這組指令的參數(shù)代表的是絕對坐標(biāo)。假設(shè)當(dāng)前畫筆所在的位置為(x0,y0)，則下面的絕對坐標(biāo)指令代表的含義如下所示：

指令 參數(shù) 說明
M x y 將畫筆移動(dòng)到點(diǎn) (x,y)
L x y 畫筆從當(dāng)前的點(diǎn)繪制線段到點(diǎn) (x,y )
H x  畫筆從當(dāng)前的點(diǎn)繪制水平線段到點(diǎn) (x,y0 )
V y  畫筆從當(dāng)前的點(diǎn)繪制豎直線段到點(diǎn) (x0,y )
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 畫筆從當(dāng)前的點(diǎn)繪制一段圓弧到點(diǎn)(x,y)
C x1 y1, x2 y2, x y 畫筆從當(dāng)前的點(diǎn)繪制一段三次貝塞爾曲線到點(diǎn)(x,y)
S x2 y2, x y 特殊版本的三次貝塞爾曲線(省略第一個(gè)控制點(diǎn))
Q x1 y1, x y  繪制二次貝塞爾曲線到點(diǎn)(x,y)
T x y 特殊版本的二次貝塞爾曲線(省略控制點(diǎn))
Z 無參數(shù) 繪制閉合圖形，如果 d 屬性不指定 Z 命令，則繪制線段，而不是封閉圖形。

移動(dòng)畫筆指令M，畫直線指令：L，H，V，閉合指令Z都比較簡單；下面重點(diǎn)看看繪制曲線的幾個(gè)指令。

繪制圓弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y

用圓弧連接2個(gè)點(diǎn)比較復(fù)雜，情況也很多，所以這個(gè)命令有7個(gè)參數(shù)，分別控制曲線的的各個(gè)屬性。下面解釋一下數(shù)值的含義：rx,ry 是弧的半長軸、半短軸長度。

x-axis-rotation 是此段弧所在的x軸與水平方向的夾角，即x軸的逆時(shí)針旋轉(zhuǎn)角度，負(fù)數(shù)代表順時(shí)針轉(zhuǎn)動(dòng)的角度。

large-arc-flag 為1 表示大角度弧線，0 代表小角度弧線。

sweep-flag 為1代表從起點(diǎn)到終點(diǎn)弧線繞中心順時(shí)針方向，0 代表逆時(shí)針方向。

x,y 是弧終端坐標(biāo)。

前兩個(gè)參數(shù)和后兩個(gè)參數(shù)就不多說了，很簡單；下面就說說中間的3個(gè)參數(shù)：x-axis-rotation代表旋轉(zhuǎn)的角度，體會(huì)下面例子中圓弧的不同：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
  
  
  
  
  3.            L 110 215 
    4. 
  
  
  
  
  4.            A 30 50 0 0 1 162.55 162.45 
    5. 
  
  
  
  
  5.            L 172.55 152.45 
    6. 
  
  
  
  
  6.            A 30 50 -45 0 1 215.1 109.9 
    7. 
  
  
  
  
  7.            L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
    8. 
  
  
  
  
  8.

上面的HTML畫出下面的圖形：

從圖中可以看到橢圓旋轉(zhuǎn)參數(shù)的不同導(dǎo)致繪制的圓弧方向不同，當(dāng)然這個(gè)參數(shù)對正圓來說沒有影響。

large-arc-flag和sweep-flag控制了圓弧的大小和走向，體會(huì)下面例子中圓弧的不同：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
  
  
  
  
  3.            A 45 45, 0, 0, 0, 125 125 
    4. 
  
  
  
  
  4.            L 125 80 Z" fill="green"/>
    5. 
  
  
  
  
  5.   
  
  
  
  
  6.            A 45 45, 0, 1, 0, 275 125 
    7. 
  
  
  
  
  7.            L 275 80 Z" fill="red"/>
    8. 
  
  
  
  
  8.   
  
  
  
  
  9.            A 45 45, 0, 0, 1, 125 275 
    10. 
  
  
  
  
  10.            L 125 230 Z" fill="purple"/>
    11. 
  
  
  
  
  11.   
  
  
  
  
  12.            A 45 45, 0, 1, 1, 275 275 
    13. 
  
  
  
  
  13.            L 275 230 Z" fill="blue"/>
    14. 
  
  
  
  
  14.

這個(gè)HTML繪制了下面的幾幅圖：

從上面可以看出，這幾個(gè)參數(shù)其實(shí)是唯一確定一段圓弧需要的參數(shù)。這里也看到，SVG中的圓弧比canvas中的復(fù)雜一些。

繪制三次貝塞爾曲線指令：C x1 y1, x2 y2, x y

三次貝塞爾曲線有兩個(gè)控制點(diǎn)，就是(x1,y1)和(x2,y2)，最后面(x,y)代表曲線的終點(diǎn)。體會(huì)下面的例子：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5.   
    6. 
  
  
  
  
  6.   
    7. 
  
  
  
  
  7.   
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9.   
    10. 
  
  
  
  
  10.   
    11. 
  
  
  
  
  11.

這個(gè)HTML片段繪制了下面的圖形：

從上面我們可以看到，控制點(diǎn)控制了曲線的弧度。

特殊版本的三次貝塞爾曲線：S x2 y2, x y

很多時(shí)候，為了繪制平滑的曲線，需要多次連續(xù)繪制曲線。這個(gè)時(shí)候，為了平滑過渡，常常第二個(gè)曲線的控制點(diǎn)是第一個(gè)曲線控制點(diǎn)在曲線另外一邊的映射點(diǎn)。這個(gè)時(shí)候可以使用這個(gè)簡化版本。這里要注意的是，如果S指令前面沒有其他的S指令或C指令，這個(gè)時(shí)候會(huì)認(rèn)為兩個(gè)控制點(diǎn)是一樣的，退化成二次貝塞爾曲線的樣子；如果S指令是用在另外一個(gè)S指令或者C指令后面，這個(gè)時(shí)候后面這個(gè)S指令的第一個(gè)控制點(diǎn)會(huì)默認(rèn)設(shè)置為前面的這個(gè)曲線的第二個(gè)控制點(diǎn)的一個(gè)映射點(diǎn)，體會(huì)一下。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.

這個(gè)HTML片段繪制如下圖形：

上面的S指令只有第二個(gè)控制點(diǎn)，第一個(gè)控制點(diǎn)采用了前面的曲線指令的第二個(gè)控制點(diǎn)的一個(gè)映射點(diǎn)。

繪制二次貝塞爾曲線指令：Q x1 y1, x y ， T x y (特殊版本的二次貝塞爾曲線)

二次貝塞爾曲線只有一個(gè)控制點(diǎn)(x1,y1)，通常如下圖所示：

如果是連續(xù)的繪制曲線，同樣可以使用簡化版本T。同樣的，只有T前面是Q或者T指令的時(shí)候，后面的T指令的控制點(diǎn)會(huì)默認(rèn)設(shè)置為前面的曲線的控制點(diǎn)的映射點(diǎn)，體會(huì)一下：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.

這個(gè)HTML片段繪制如下圖形：

同樣的，如果T指令前面不是Q或者T指令，則認(rèn)為無控制點(diǎn)，畫出來的是直線。

相對坐標(biāo)繪制指令

與絕對坐標(biāo)繪制指令的字母是一樣的，只不過全部是小寫表示。這組指令的參數(shù)中涉及坐標(biāo)的參數(shù)代表的是相對坐標(biāo)，意思就是參數(shù)代表的是從當(dāng)前點(diǎn)到目標(biāo)點(diǎn)的偏移量，正數(shù)就代表向軸正向偏移，負(fù)數(shù)代表向反向偏移。不過對Z指令來說，大小寫沒有區(qū)別。

這里要注意，絕對坐標(biāo)指令與相對坐標(biāo)指令是可以混合使用的。有時(shí)混合使用可以帶來更靈活的畫法。

SVG path繪制注意事項(xiàng)：

繪制帶孔的圖形時(shí)要注意：外層邊的繪制需要是逆時(shí)針順序的，里面的洞的邊的順序必須是順時(shí)針的。只有這樣繪制的圖形填充效果才會(huì)正確。

實(shí)用參考：
腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發(fā)中心：https://developer.mozilla.org/en/SVG
熱門參考：http://www.chinasvg.com/
官方文檔：http://www.w3.org/TR/SVG11/


當(dāng)前名稱：HTML5中SVG2D圖形繪制
地址分享：http://www.dlmjj.cn/article/cdcjcjc.html