1捧书、SVG的介紹
SVG是可以在網(wǎng)頁中繪制復(fù)雜的圖形
1.1吹泡、svg與canvas畫布的區(qū)別
計算機(jī)中圖像的類型分為兩種，位圖和矢量圖经瓷。
位圖是由像素點組合而成的圖像爆哑，一個點就是一個像素，每個點都有自己的顏色了嚎，位圖也與分辨率有直接的聯(lián)系泪漂，分辨率大的位圖清晰度高，其放大倍數(shù)清晰度也對應(yīng)的提高歪泳，但是萝勤，當(dāng)位圖的放大倍數(shù)超過最佳分辨率時，就會出現(xiàn)細(xì)節(jié)丟失呐伞，產(chǎn)生鋸齒狀邊緣的情況敌卓。
矢量圖是通過數(shù)學(xué)的一種方式，其內(nèi)容以線條和色塊為主伶氢，矢量圖跟分辨率無關(guān)趟径，它可以任意的放大且清晰度不變，也不會有鋸齒狀邊緣癣防。
SVG是矢量圖的形式呈現(xiàn)蜗巧，是根據(jù)數(shù)學(xué)計算得來的，而canvas畫布是以位圖的形式呈現(xiàn)蕾盯，其次幕屹，SVG是基于XML的，而canvas是基于H5级遭。
2望拖、使用SVG
2.1、創(chuàng)建svg文件
svg是基于XML的挫鸽，因此需要先創(chuàng)建XML模板文件说敏，然后引入相關(guān)的SVG標(biāo)簽進(jìn)行搭建基本的svg繪圖框架
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
</svg>
2.2、或直接嵌入到HTML頁面中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx='100' cy='100' r='70' fill='green'>
</circle>
</svg>
</body>
</html>
繪制圓.png
其中cx是圓心點離X軸原點的距離丢郊，cy是圓心點離Y軸原點的距離盔沫，r是半徑，fill是填充的顏色蚂夕。
繪制圓.png
3迅诬、不同圖形的不同屬性
3.1、圓形(<circle></circle>)
| 屬性 | 屬性說明 |
|---|---|
| cx | 圓心離坐標(biāo)軸原點x方向的距離 |
| cy | 圓心離坐標(biāo)軸原點y方向的距離 |
| r | 半徑大小 |
| fill | 圖片填充的顏色 |
| stroke | 外部輪廓的邊框 |
| stroke-width | 外部輪廓的邊框的大小 |
| transparent | 圖形內(nèi)部設(shè)置透明 |
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx='100' cy='100' r='70' stroke='red' fill='transparent' stroke-width='5'>
</circle>
</svg>
透明的帶邊框的原形.png
3.2婿牍、矩形(<rect></rect>)
| 屬性 | 屬性說明 |
|---|---|
| x | 矩形中心點離坐標(biāo)軸原點x方向的距離 |
| y | 矩形中心點離坐標(biāo)軸原點y方向的距離 |
| width | 矩形的寬度 |
| height | 矩形的高度 |
| rx | 弧度橢圓的x長度 |
| ry | 弧度橢圓的y長度 |
| fill | 圖片填充的顏色 |
| stroke | 外部輪廓的邊框 |
| stroke-width | 外部輪廓的邊框的大小 |
| transparent | 圖形內(nèi)部設(shè)置透明 |
<rect width="300" height="100" x='100' y='100' fill='transparent' rx='40' ry='30' stroke='red' stroke-width='5'>
</rect>
rx和ry屬性解釋.png
3.3侈贷、橢圓(<ellipse></ellipse>)
| 屬性 | 屬性說明 |
|---|---|
| cx | 定義的橢圓中心的x坐標(biāo) |
| cy | 定義的橢圓中心的y坐標(biāo) |
| rx | 定義的水平半徑 |
| ry | 定義的垂直半徑 |
| fill | 圖片填充的顏色 |
| stroke | 外部輪廓的邊框 |
| stroke-width | 外部輪廓的邊框的大小 |
| transparent | 圖形內(nèi)部設(shè)置透明 |
<ellipse cx='200' cy='100' rx='100' ry='35' fill='transparent' stroke='red' stroke-width='5' >
</ellipse>
屬性說明png
3.4、線(<line></line>)
| 屬性 | 屬性說明 |
|---|---|
| x1 | 第一個點離坐標(biāo)軸原點x方向的距離 |
| y1 | 第一個點離坐標(biāo)軸原點y方向的距離 |
| x2 | 第二個點離坐標(biāo)軸原點x方向的距離 |
| y2 | 第二個點離坐標(biāo)軸原點y方向的距離 |
| stroke | 線條的顏色 |
| stroke-width | 線條的粗細(xì)大小 |
| stroke-opacity | 線條設(shè)置透明度 |
<line x1='10' y1='10' x2='100' y2='50' stroke='#000' stroke-width='5' stroke-opacity='0.5'>
</line>
線條.png
3.5等脂、折線(<polyline></polyline>)
| 屬性 | 屬性說明 |
|---|---|
| points | 所有點的集合 |
| fill | 不希望起始點連起來有填充顏色的話設(shè)置為null |
| stroke | 線條的顏色 |
| stroke-width | 線條的粗細(xì)大小 |
| stroke-opacity | 線條設(shè)置透明度 |
<polyline points='50,50 100,50 100,100 150,100 150,150 200,150 200,200 250,200' fill='none' stroke='red' stroke-width='5' >
</polyline>
image.png
3.6俏蛮、多邊形(<polygon></polygon>)
| 屬性 | 屬性說明 |
|---|---|
| points | 所有點的集合 |
| fill | 設(shè)置為lime |
| stroke | 線條的顏色 |
| stroke-width | 線條的粗細(xì)大小 |
| stroke-opacity | 線條設(shè)置透明度 |
| fill-rule | 填充規(guī)則 |
fill-rule 屬性提供兩種選項用于指定如何判斷圖形的“內(nèi)部”
- nonzero：起始值為0，射線會和路徑相交上遥，如果路徑方向和射線方向形成的是順時針方向則+1搏屑，如果是逆時針方向則-1，最后如果數(shù)值為0粉楚，則是路徑的外部辣恋；如果不是0亮垫，則是路徑的內(nèi)部。
- evenodd：起始值為0伟骨，射線會和路徑相交饮潦，每交叉一條路徑，我們計數(shù)就+1携狭，最后看我們的總計算數(shù)值继蜡，如果是奇數(shù)，則認(rèn)為是路徑內(nèi)部逛腿，如果是偶數(shù)稀并，則認(rèn)為是路徑外部。
深刻理解兩種規(guī)則：
-
nonzero判定原理
nonzero內(nèi)部.png
nonzero外部.png -
evenodd判定原理
evenodd內(nèi)部.png
evenodd外部.png
最后单默，圖形的代碼部分：
<polygon points='50,50 500,50 300,200 50,50 50,100 200,50' fill='lime' stroke='red' fill-rule='evenodd' stroke-width='5' >
</polygon>
3.7碘举、路徑(<path></path>)
路徑是通過d屬性繪制而成的，d屬性的第一個命令必須是移動命令(即M)
小寫的命令的話描述與大寫字母一致搁廓，只是使用的坐標(biāo)是相對坐標(biāo)殴俱。
| 指令 | 參數(shù) | 名稱 | 描述 |
|---|---|---|---|
| M | x,y | moveto | 移動到 移動虛擬畫筆到指定的（x,y）坐標(biāo)，僅移動不繪制 |
| L | x,y | lineto | 連直線到 從當(dāng)前畫筆所在位置繪制一條直線到指定的（x,y）坐標(biāo) |
| H | x | horizontal lineto | 水平連線到 繪制一條水平直線到參數(shù)指定的x坐標(biāo)點枚抵，y坐標(biāo)為畫筆的y坐標(biāo) |
| V | y | vertical lineto | 垂直連線到 從當(dāng)前位置繪制一條垂直直線到參數(shù)指定的y坐標(biāo) |
| C | x1,y1 x2,y2 x,y | curveto | 三次方貝塞爾曲線 從當(dāng)前畫筆位置繪制一條三次貝茲曲線到參數(shù)（x,y）指定的坐標(biāo)线欲。x1，y1和x2,y2是曲線的開始和結(jié)束控制點汽摹，用于控制曲線的弧度 |
| S | x2,y2 x,y | shorthand / 平滑三次方貝塞爾曲線 | 從當(dāng)前畫筆位置繪制一條三次貝塞爾曲線到參數(shù)（x,y）指定的坐標(biāo)李丰。x2,y2是結(jié)束控制點。開始控制點和前一條曲線的結(jié)束控制點相同 |
| Q | x1,y1 x,y | 二次方貝塞爾曲線 | 從當(dāng)前畫筆位置繪制一條二次方貝塞爾曲線到參數(shù)（x,y）指定的坐標(biāo)逼泣。x1,y1是控制點趴泌，用于控制曲線的弧度 |
| T | x,y | 平滑的二次貝塞爾曲線 | 從當(dāng)前畫筆位置繪制一條二次貝塞爾曲線到參數(shù)（x,y）指定的坐標(biāo)±控制點被假定為最后一次使用的控制點 |
| A | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 橢圓弧線 | 從當(dāng)前畫筆位置開始繪制一條橢圓弧線到（x,y）指定的坐標(biāo)嗜憔。rx和ry分別為橢圓弧線水平和垂直方向上的半徑。x-axis-rotation指定弧線繞x軸旋轉(zhuǎn)的度數(shù)氏仗。它只在rx和ry的值不相同是有效果吉捶。large-arc-flag是大弧標(biāo)志位，取值0或1皆尔，用于決定繪制大弧還是小弧呐舔。sweep-flag用于決定弧線繪制的方向 |
| Z | 無 | 閉合路徑 | 從結(jié)束點繪制一條直線到開始點，閉合路徑 |
<path id="line1" d="M 100 150 l 150 300" stroke="red" stroke-width="3" fill="none" />
<path id="line2" d="M 250 450 l 150 -300" stroke="red" stroke-width="3" fill="none" />
<path d="M 100 150 q 150 300 300 0" stroke="blue" stroke-width="5" fill="none" />
路徑.png
