HTML5_04之SVG绘图

1、关于Canvas绘制图像：
 问题：需要绘制多张图片时，必须等待所有图片加载完成才能开始绘制；而每张图片都是异步请求，彼此没有先后顺序，哪一张先加载完成完全无法预测；
 方案：
 var progress=0;//全局加载进度
 var img=new Image();
 img.src='xx.jpg';
 img.onload=function(){
  progress+=10;//该图片权重
  if(progress===100){
   startDraw();
  }
 }
2、关于Canvas中某个图形/图像添加事件监听：
 问题：HTML中，只有标签/元素才能添加事件监听，而Canvas绘图只有一个标签——Canvas；
 方案：若要为Canvas中某个图形/图像添加事件监听，可委托给Canvas，获取事件发生坐标，然后判断是否处于目标图像/图形内；
3、SVG绘图：
 Scalable Vector Graphics，可缩放的矢量图；
 元素组：<g></g>；把多个元素包含起来，每个组员共享<g>元素的属性；
4、SVG绘图——绘制矩形：
 ①SVG图形属性可使用HTML标签属性来声明，也可以使用类似CSS的形式声明——SVG标签专用样式；这些属性不属于HTML DOM，不能直接rect.x读写，可使用核心DOM的setAttribute();方法操作；
 ②<rect></rect>
 ③属性：width——矩形的宽；height——矩形的高；x——定位点的X坐标；y——定位点的Y坐标；fill——填充颜色；fill-opacity——填充颜色透明度；stroke——描边颜色；stroke-width——描边宽度；
 ④使用JS创建新SVG元素：
  方法一：svg.innerHTML='<rect></rect>';
  方法二：document.createElementNS('http://www.w3.org/2000/svg','rect');
5、SVG绘图——绘制圆形：
 ①<circle></circle>
 ②属性：r——半径；cx——圆心的X坐标；cy——圆心的Y坐标；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
6、SVG绘图——绘制椭圆：
 ①<ellipse></ellipse>
 ②属性：rx——横向半径；ry——纵向半径；cx——圆心的X坐标；cy——圆心的Y坐标；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
7、SVG绘图——绘制直线：
 ①<line></line>
 ②属性：x1——起点横坐标；y1——起点纵坐标；x2——终点纵坐标；y2——终点纵坐标；stroke——描边颜色，默认transparent；stroke-width——描边宽度；
8、SVG绘图——绘制折线：
 ①<polyline></polyline>
 ②属性：points——折线上的点，取值："0,0 10,20 x,y ..."；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度，必须设置为0，否则会自动填充；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
9、SVG绘图——绘制多边形：
 ①<polygon></polygon>
 ②属性：points——多边形各角上的点，取值："0,0 10,20 x,y ..."；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
10、SVG绘图——绘制文本：
 ①<text>文本内容</text>
 ②属性：x——起点横坐标；y——起点纵坐标；font-size——字体大小；font-family——字体类型；fill——填充颜色，默认为#000；fill-opacity——填充颜色透明度；stroke——描边颜色，默认为transparent；stroke-width——描边宽度；
11、SVG绘图——绘制图像：
 ①若绘制了位图在SVG上，SVG图放大后也会失真；
 ②<image></image>
 ③属性：x——起点横坐标；y——起点纵坐标；xlink:href——指定图片的URL；width——图片的宽，默认为0不显示；height——图片的高，默认为0不显示；
12、SVG绘图中的渐变色：
 渐变对象属于SVG中的特效对象——特效对象，都必须定义在<defs></defs>标签内；例：
 <svg id="s1" width="500" height="400">
  <defs>
   <!--定义id为rainbow的特效元素-->
   <linearGradient id="rainbow" x1="0" y1="0" x2="100%" y2="100%">
    <stop offset="0" stop-color="red"></stop>
    <stop offset="1" stop-color="purple"></stop>
   </linearGradient>
  </defs>
  <!--引用id为rainbow的特效元素-->
  <rect x="50" y="100" width="400" height="200" fill="url(#rainbow)"></rect>
 </svg>