(第六天)HTML5之SVG的了解与使用&Web数据存储

2016-10-22  本文已影响187人  IOLG

SVG

什么是SVG？
SVG与Canvas如何选择？

理解以下内容让你更快的明白如何选择使用SVG or Canvas

Canvas SVG
基于像素（动态 .png） 基于形状
单个 HTML 元素 多个图形元素，这些元素成为 DOM 的一部分
仅通过脚本修改 通过脚本和 CSS 修改
事件模型/用户交互颗粒化 (x,y) 事件模型/用户交互抽象化 (rect, path)
图面较小时、对象数量较大 (>10k)（或同时满足这二者）时性能更佳 对象数量较小 (<10k)、图面更大（或同时满足这二者）时性能更佳
Canvas与SVG在不同情况下的性能比较 根据需求选择
什么情况选择SVG更好（举例）？

我们使用可显著增加方案范围的交互功能来扩展高保真文档方案。 其中包括：

SVG如何使用？
设计师与前端工程师

一般情况下，设计师可以通过Adobe Illustrator之类的设计软件设计并制作好SVG图片，而前端工程师拿到SVG之后可以直接实现到网页。

SVG元素之viewBox属性的介绍
代码示例
<head>
    <meta charset="UTF-8">
    <title>svg</title>
    <style>
        .viewBox {
            transition: width 5s, height 5s;
        }
        .viewBox:hover {
            width: 400px;
            height: 300px;
        }
        .diff:hover {
            height: 30px;
        }
    </style>
</head>

<body>
<h3>直接在页面中绘制svg</h3>
<!-- 直接在页面中绘制SVG -->
<!-- svg的width与height属性决定了svg的范围，里面的元素如果超出,则无法显示
 svg可以使用css样式-->
<svg width="50" height="50" style="border: 1px solid #f00;">
    <!--绘制一个圆心坐标50,50 半径30px的圆-->
    <circle cx="50" cy="50" r="30"/>
    <circle cx="10" cy="10" r="10"/>
</svg>
<h3>svg没有viewBox属性的情况(下方两种情况的原始状态)</h3>
<!--没有设置viewBox的情况-->
<svg width="40" height="30" style="border: 1px solid #f00;">
    <!--viewBox就像是在svg上画了一个起点为0,0宽高为2,2的矩形，在此矩形
    中的子元素会被拉伸填充到svg中；-->
    <circle cx="5" cy="5" r="5"/>
</svg>
<h3>svg有viewBox属性，svg被等比例拉伸的情况</h3>
<!--viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
viewBox四个属性：startX,startY,width,height
等比例动态拉伸效果可将鼠标放到该元素上查看-->
<svg class="viewBox" viewBox="0 0 2 2" width="40" height="30" style="border: 1px solid #f00;">
    <!--viewBox就像是在svg上画了一个起点为0,0宽高为2,2的矩形，在此矩形
    中的子元素会被拉伸填充到svg中,此矩形范围外的子元素不显示，除非svg被不等比例拉伸；-->
    <circle cx="5" cy="5" r="5"/>
</svg>
<h3>svg有viewBox属性，svg被不等比例拉伸的情况</h3>
<!--不等比例动态拉伸效果-->
<svg class="viewBox diff" viewBox="0 0 2 2" width="40" height="30" style="border: 1px solid #f00;">
    <circle cx="5" cy="5" r="5"/>
</svg>
<h3>通过使用img调用svg图片</h3>
<!-- 调用svg图片 -->
<img src="circle2.svg" alt="" height="120" width="120">
</body>
上述代码示例整体效果图 svg等比例拉伸效果图 svg不等比例拉伸效果图

Web数据存储

localStorage(本地式存储)
<body>
  <script>
  "use stract"
  window.onload = function(ev) {
      var ta = document.getElementById("ta");
      var save = document.getElementById("save");
      var remove = document.getElementById("remove")
          // localStorage以键值对的结构储存数据，所以可以通过.prop直接读取、添加；
      if (localStorage.txt) { //判断是否存在txt这个key
          //getItem、setItem、removeItem是标准用法，也可以直接通过.txt获取value
          ta.value = localStorage.getItem("txt"); 
      }
      // 保存监听
      save.onclick = function(ev) {
          // 往localStorage中添加一个key为txt的值
          localStorage.setItem("txt", ta.value);
          // localStorage.txt = ta.value;
      }

      // 移除监听
      remove.onclick = function(ev) {
          // 清空localStorage
          // localStorage.clear();
          // 删除key为txt的item，若不存在txt的key，不会报错
          localStorage.removeItem("txt");
          // 此方法并未删除txt这个数据，只是将key为txt的项改为空了而已
          // localStorage.txt = "";
      }

  }
  </script>
  <textarea id="ta" cols="30" rows="10"></textarea>
  <button id="save">保存</button>
  <button id="remove">删除</button>
</body>
sessionStorage(会话式存储)
<body>
  <label for="btn" id="label">0
      <input id="btn" type="button" value="增加">
  </label>
  <script>
  "use strict"
  var label = document.getElementById("label");
  // 获取label中的第一个子元素，即btn
  var btn = label.control;
  var num = 0;
  console.log("label的子节点总数：" + label.childNodes.length + " 第一个子节点的值：" + label.childNodes[0].data);
  // 判断sessionStorage里面是否存有key为num的值
  if (sessionStorage.num) {
      // 若存在，则将label第一个子节点的data和num的起始值修改为key为num的值；
      // + " "是为了值与按钮之间一个空格,数字+空格在运算的时候会自动转换，如果加字符，会显示NaN+字符的结果；
      label.childNodes[0].data = num = sessionStorage.num + " ";
  }

  //点击事件 
  btn.onclick = function(ev) {
      num++;
      // 更新data和key为num的值为num
      label.childNodes[0].data = sessionStorage.num = num + " ";
      console.log("label的值为：" + label.childNodes[0].data);
  }
  </script>
</body>
localStorage与sessionStorage的区别
上一篇 下一篇

猜你喜欢

热点阅读