SVG和CANVAS
-
SVG - 實(shí)際開(kāi)發(fā)中掖疮，多用SVG
不依賴分辨率 支持事件處理器 不適合游戲 大型渲染區(qū)域的程序(例如矫膨，百度地圖) -
Canvas
依賴分辨率 不支持事件綁定 最適合網(wǎng)頁(yè)游戲 可以用圖片格式保存圖像
繪制圖形
*創(chuàng)建 <svg></svg>
類(lèi)似于canvas元素宙彪，但可以使用css樣式茫船，使用svg繪制圖形吵冒，必須定義svg元素中
矩形
<rect id="rect" x="100" y="100" width="200" height="150" fill="red" stroke="green" stroke-width="5"></rect>圓
<circle cx="50" cy="50" r="50" fill="red"></circle>橢圓
<ellipse cx="200" cy="50" rx="100" ry="50" fill="orange"></ellipse>直線
<line x1="0" y1="0" x2="400" y2="400" stroke="white"></line>-
折線
<polyline points="100,20 20,100 200,200 100,20" stroke="green" stroke-width="10" fill="pink"></polyline><polygon points="100,20 20,100 200,200 100,20" stroke="green" stroke-width="10" fill="pink"></polygon>
注意：通過(guò)js設(shè)置序號(hào)屬性是無(wú)效的搏屑，因?yàn)檫@些只讀屬性
SVG漸變
- 創(chuàng)建 <svg></svg>
- 在svg里追加defs元素
<svg>
<defs></defs>
</svg> - 在defs里追加linearGradient元素
<linearGradient x1="" y1="" x2="" y2=""></linearGradient>
注意： 這四個(gè)值都是百分比 - 在linearGradient里面追加stop元素
<stop offset="" stop-color="" stop-opacity="">
<stop offset="" stop-color="">
offset: 值為百分比
stop-color:設(shè)置漸變顏色
stop-opacity:設(shè)置漸變顏色的透明度 - 在defs下面追加<rect>,畫(huà)出圖形,并將上面設(shè)置的線性漸變，添加到矩形中
使用fill屬性免胃，值為url(#漸變?cè)氐膇d值)
<rect x="0" y="0" width="400" height="400" fill="url(#def)"> - 扇形漸變r(jià)adialGradient音五，參考線性漸變
SVG高斯模糊效果
<svg width="500" height="500">
<defs>
<filter id="Gaussian_Blur">
//fegaussianblur- 高斯模糊,stdDeviation - 設(shè)置模糊程度
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<rect x="0" y="0" width="400" height="400" filter="url(#def)">
</svg>
