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>
