SVG和CANVAS

SVG - 实际开发中，多用SVG

  不依赖分辨率
  支持事件处理器
  不适合游戏
  大型渲染区域的程序(例如，百度地图)

Canvas

   依赖分辨率
   不支持事件绑定
   最适合网页游戏
   可以用图片格式保存图像

绘制图形

*创建 <svg></svg>
类似于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>
```

注意：通过js设置序号属性是无效的，因为这些只读属性

SVG渐变

创建 <svg></svg>
在svg里追加defs元素
<svg>
<defs></defs>
</svg>
在defs里追加linearGradient元素
<linearGradient x1="" y1="" x2="" y2=""></linearGradient>
注意：这四个值都是百分比
在linearGradient里面追加stop元素
<stop offset="" stop-color="" stop-opacity="">
<stop offset="" stop-color="">
offset: 值为百分比
stop-color:设置渐变颜色
stop-opacity:设置渐变颜色的透明度
在defs下面追加<rect>,画出图形,并将上面设置的线性渐变，添加到矩形中
使用fill属性，值为url(#渐变元素的id值)
<rect x="0" y="0" width="400" height="400" fill="url(#def)">
扇形渐变radialGradient，参考线性渐变

SVG高斯模糊效果

 <svg width="500" height="500"> 
   <defs> 

      <filter id="Gaussian_Blur"> 

            //fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度 
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> 

      </filter>
   </defs>

   <rect x="0" y="0" width="400" height="400" filter="url(#def)">
 </svg>