HTML5进阶——存储、拖拽、SVG、Canvas

Dear 丶 2022-05-19 05:16 270阅读 0赞

## 一、HTML5储存 ##

### 0x1 LocalStorage和sessionStorage ###

1、相同的使用方法

*  使用 setItem 方法设置存储内容
 *  使用 getItem 方法获取存储内容
 *  使用 removeltem 方法删除存储内容
 *  使用 clear 方法清除所有内容
 *  使用 length 属性获取存储内容个数
 *  使用 key 方法获取存储字段

localStorage.setItem('site','geekmubai.com')
    localStorage.getItem('site')
    localStorage.removeItem('site')
    localStorage.length
    localStorage.key(0)
    localStorage.clear

2、不同的存储时效

*  localStorage 存储会持久化
 *  sessionStorage 存储会在网页会话结束后失效

3、不同的存储容量

*  localStorage 容量-般在 2- 5 Mb 左右
 *  sessionStorage 存储容量不一，部分浏览器不设限

### 0x2 使用 Storage 时的注意点 ###

1、存储容量超出限制

*  抛出 QuotaExceededError 异常
 *  存储值时应使用 try catch 捕获异常

// try...catch 主要用于捕获代码运行时的异常,并进行异常处理。
            // try 部分包含运行时，可能出现异常的代码.
            // 而 catch 部分包含错误发生时运行的代码。
            try {
                // try 中写可能产生异常的语句
                localStorage.setItem(key, data);
                save();
            } catch (e) {
                // catch 中写负责异常处理的语句
                console.log(e.name);

2、存储类型的限制

*  仅能存储字符串
 *  注意类型转换

3、SessionStorage 失效机制

*  刷新页面并不会失效
 *  相同URL不同标签页不能共享 sessionStorage

4、Web Storage 的优化

*  性能与存储容量大小无关，与读取次数有关
 *  减少读取 item 次数
 *  单个 item 中尽可能多的存储数据

### 0x3 实现一个带有过期机制的 localStorage ###

带有过期机制的 localStorage 的功能需求

*  可以设置数据的存储时间
 *  过期数据清理
 *  自行维护存储空间  
    Demo

### 0x3 如何创建数据库和“表” ###

1、了解 IndexedDB 数据库

*  IndexedDB 数据库是一种事务型数据库
 *  是 NoSQL 数据库
 *  使用 JS 对象存储数据

2、创建数据库和表

*  IndexedDB.open 创建数据库  
    indexedDB.open(“dbname’,’version’)
 *  Open 方法返回一个 IDBRequest 对象
 *  IndexedDB.deleteDatabase(‘dbname’) 删除数据库
 *  IndexedDB.CreateObjectStore 创建“表”

## 二、HTML5拖拽 ##

### 0x1 传统方法 ###

实现鼠标事件位置的4种方式  
![20180720151447.png][]  
event.clientX、event.clientY  
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。

event.pageX、event.pageY  
类似于event.client，但它们使用的是文档坐标而非窗口坐标。包含滚动条滚动的距离。

event.offsetX、event.offsetY  
鼠标相对于事件源元素（srcElement）的X,Y坐标

event.screenX、event.screenY  
鼠标相对于用户显示器屏幕左上角的X,Y坐标。

注：function(e)中的e的含义  
简单来说就是指向了当前发生的事件（click、mouseover等等），保存了当前事件的信息。如鼠标点击事件，有鼠标的坐标信息。  
其中，e是标准浏览器传递进去的事件参数，低版本IE不会传递，事件参数放置在window.event对象中，所以兼容低版本的IE要加上这句e=e||window.event;

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Drag</title>
      <script type="text/javascript" src="../jquery.min.js"></script>
      <style type="text/css">
        .dialog {
          position: absolute;
          left: 100px;
          top: 50px;
          width: 200px;
        }
        .title {
          background: #D7DEF0;
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          cursor: move;
        }
        .content {
          background: #F0F0F0;
          width: 100%;
          height: 200px;
        }
      </style>
    </head>
    <body>
      <div id="dialog" class="dialog">
        <div id="title" class="title">Title</div>
        <div class="content"></div>
      </div>
      <script>
        var isMouseDown = false;
        var lastPoint = {};
        $("#title").on("mousedown", function(e) {
         //给title绑定鼠标按下事件
          console.log(e);
          isMouseDown = true;
          lastPoint.x = e.pageX;
          lastPoint.y = e.pageY;
        }).on("mousemove", function(e) {
          //绑定鼠标移走事件
          if(isMouseDown) {
            var dialog = $("#dialog"); //取dialog框
            var targetX = parseInt(dialog.css("left")) + e.pageX - lastPoint.x; //取css中left距离，加上鼠标移动的距离
            var targetY = parseInt(dialog.css("top")) + e.pageY - lastPoint.y;
            dialog.css("left", targetX + "px"); //设置移动后的框的位置
            dialog.css("top", targetY + "px");
            lastPoint.x = e.pageX; //更新lastPoint 
            lastPoint.y = e.pageY;
          }
        }).on("mouseup", function() {
          //绑定鼠标放开事件
          isMouseDown = false;
          lastPoint = {};
        });
      </script>
    </body>
    </html>

### 0x2 HTML5拖拽 ###

三个重要的点

*  Draggable=true  
    放在被拖拽的元素上，元素才有拖拽效果
 *  拖拽事件 ondragstart  
    在用户开始拖动元素或选择的文本时触发绑定的事件
 *  dataTransfer 对象

Demo

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>drag</title>
      <style>
        .container {
          width: 200px;
          height: 200px;
          background-color: yellow;
        }
        .target {
          width: 100px;
          height: 100px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
      <div id="container" class="container" ondrop="drop(event)" ondragover="dragover(event)"></div>
      <div id="target" class="target" draggable="true" ondragstart="dragstart(event)"></div>
      <script>
        function dragover(e) {
         
          e.preventDefault();
        }
        function dragstart(e) {
         
          e.dataTransfer.setData("Text", e.target.id);
        }
        function drop(e) {
         
          e.preventDefault();
          var data = e.dataTransfer.getData("Text");
          e.target.appendChild(document.getElementById(data));
        }
      </script>
    </body>
    </html>

## 三、SVG ##

### 0x1 SVG基础 ###

1、SVG是什么

*  指可伸缩矢量图形（Scalable Vector Graphics)
 *  用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形
 *  图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准
 *  与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

2、SVG的优势

*  便于读取和修改
 *  小
 *  可伸缩
 *  开放标准

### 0x2 SVG视口 ###

*  Viewport  
    SVG 可见区域的大小，或者可以想象成舞台大小，画布大小。  
    除了SVG本身，其他一些元素,例如的width/height属性也可以使用.上面的这些单位，也是默认单位是像素。

常用单位：  
![20180720165004.png][]  
\- Viewbox——视区盒子  
SVG 就像是我们的显示器屏幕，viewBox 就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！

viewBox="x, y, width, height"
    // x：左上角横坐标，y：左上角纵坐标，width：宽度，height：高度

*  preserveAspectRatio  
    使用preserveAspectRatio属性来让viewBox保持宽高比

preserveAspectRatio=[defer] <align-x> <meetOrSlice>
    defer
    defer参数是可选值，它仅仅在image元素上应用preserveAspectRatio
    属性时才使用。在使用其它元素时会被忽略。
    align参数
    align参数控制viewBox是否强制进行均匀的缩放
    meetOrSlice参数
    通俗来说，该参数控制viewBox缩放的方式

align参数以及图解  
![20180720170950.png][]  
![20180720171139.png][]  
align参数的3×3种个组合取值（有规律）  
![20180720171252.png][]  
meetOrSlice参数  
![20180720171358.png][]

### 0x3 SVG坐标系统 ###

*  世界坐标系统  
    计算机图形学中的世界坐标系  
    ![20180720172920.png][]
 *  最初坐标系统  
    SVG图像自动画的坐标系统  
    ![20180720173205.png][]
 *  用户坐标系统（白框）  
    ![20180720173439.png][]

### 0x4 转换坐标系统 ###

*  SVG transform  
    SVG元素可以通过缩放，移动，倾斜和旋转来变换，类似于HTML元素使用  
    transform来变换
 *  transform 属性

<rect x="200" y="100" width="400" height="200"
    transform="translate(100)">
    //在SVG中，transform的坐标变换是相对于画布左上角进行计算;
    SVG transform属性语法略微自带偏移，CSS transform更加纯粹。

*  SVG transform translate位移

transform="translate(<tx> [<ty>])"
    tx 代表 x 轴上的 translation 值； ty 代表 y 轴上的 translation 值。
    ty 值是可选的，如果省略，默认值为0。
    当多个参数值的时候，可以使用逗号，或者直接空格分隔。
    数值中一定一定一定一定不能包含单位

注意：HTML元素的偏移是相对自己的中心点，SVG元素的偏移是相对SVG的左上角。  
![20180720180321.png][]  
单纯地位移来讲，无论你相对于哪个位置，实际偏移的位置都是一样的，因此，从表现上讲，两者最终的位置看上去还是一样的。

*  SVG transform rotate旋转

transform="rotate(<rotate-angle> [<cx> <cy>])"
    rotate-angle 代表旋转角度，无单位，默认单位是度。
    可选 cx 和 cy 值代表无单位的旋转中心点。
    如没设置 cx 和 cy，旋转点为当前用户坐标系的原点。

*  SVG transform rotate旋转  
    SVG元素默认是SVG左上角为中心变换。  
    ![20180720180525.png][]
 *  SVG transform scale缩放

transform="scale(<sx> [<sy>])"
    参数说明
    sx 代表沿x轴的缩放值，用来水平延长或者拉伸元素；
    sy 代表沿y轴缩放值，用来垂直延长或者缩放元素。
    sy 值是可选的，如果省略默认值等于 sx 。

*  SVG transform scale缩放  
    HTML元素的缩放是相对自己的中心点，SVG元素的缩放是相对SVG的左上角。  
    ![20180720180628.png][]  
    当SVG元素缩放时，整个坐标系被缩放，导致元素在视窗中重新定位

[20180720151447.png]: /images/20220519/7f8a6610ec344c619dbad2122aaeccc9.png
[20180720165004.png]: /images/20220519/51f537f307d94553aed46f5f738b46e0.png
[20180720170950.png]: /images/20220519/d7fa94b55f624154a37097580b956269.png
[20180720171139.png]: /images/20220519/1fbf1dbeca6f48c587fb95bc65060554.png
[20180720171252.png]: /images/20220519/87ca52bcff0847239c2204cb4a641e14.png
[20180720171358.png]: /images/20220519/911e6628181a417a9abf3688c9dad8df.png
[20180720172920.png]: /images/20220519/c68af070627f44cab4bed48b8bd41460.png
[20180720173205.png]: /images/20220519/3c6e56eef0b64d9e915c204a3cdb1fd4.png
[20180720173439.png]: /images/20220519/ea72de58b23d4a0d8405a42de9ed3d6e.png
[20180720180321.png]: /images/20220519/f4a027b29ba343c1aeea80922acaf6a3.png
[20180720180525.png]: /images/20220519/f5b4943c372140c385cc2d91a740e1b0.png
[20180720180628.png]: /images/20220519/844fb5f0da4c49c9a620e0bccd8b6ba8.png