H5--画布标签（svg）

svg 和 canvas的区别

工具	canvas	svg
绘图类型	位图	矢量图
缩放	失真	不失真
颜色细节	丰富	单调
运用领域	图片、游戏	图标、地图、统计图
内容	JS绘图	每个图形都是标签
事件绑定	只能在canvas标签上绑定	非常方便

svg 矢量图

绘制的元素标签包含在svg内部

分组标签

在分组中的元素可以自动继承公共属性或样式

<svg><g>有相同属性的元素</g></svg>

动态创建svg相关的标签

// 1.创建
var oRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
//svg元素的nodeName都是纯小写形式，和普通的ＨＴＭＬ元素不同
// 2.设置属性
oRect.setAttribute('属性名','属性值');
// 获取属性值
oRect.getAttribute('属性名');

矩形+多边形

<!-- 矩形 --><!-- x和y如果不给值，默认都是0，在左上角绘制 -->
<svg><rect width="100" height="100" x='100' y ='100' fill=''></rect></svg>
<!-- 多边形 需要闭合 -->
<svg><polygon points="x1,y1 x2,y2 x3,y3 ...." stroke =''></polygon></svg>

绘制圆形+椭圆

<!-- 圆 -->
<svg><circle cx="圆心x轴坐标" cy="圆心y轴坐标" r ="半径" fill="填充色" fill-opacity="颜色透明度"></circle></svg>
<!-- 椭圆 -->
<svg><ellipse cx = 'x轴上的圆心' cy='y轴上的圆心' rx='x轴上的半径' ry='y轴上的半径'></ellipse