你的位置:首页 > 网页设计

[网页设计]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>