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

最新推荐文章于 2024-08-01 17:51:09 发布

徐念安

最新推荐文章于 2024-08-01 17:51:09 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/geekmubai/article/details/81137701

版权

前端开发专栏收录该内容

23 篇文章 1 订阅

订阅专栏

一、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

<script>
'use strict'
;(function () {
    var ls = window.localStorage

    function oops () {
        return console.warn('your browser is not supported localStorage API')
    }

    function getItem (key) {
        var data = ls.getItem(key)  //在没有数据项的情况下，data为null
        data = JSON.parse(data)||{} 

        if (data.time === 0) {// 上句如是data = JSON.parse(data)，在data.time时，就会报错。所以调整成data = JSON.parse(data)||{}
            return data.value
        } else if (Date.now() > data.time) { // 判断是否超时
            ls.removeItem(key)
            return ''
        } else {
            return typeof data.value !== 'undefined' ? data.value : ''
        }
    }

    function setItem (key, value, time) {
        if (typeof key === 'undefined') {return}
        var data = {
            time: time ? Date.now() + time : 0,
            value: value
        }
        data = JSON.stringify(data)
        try {
            ls.setItem(key, data)
        } catch (e) {
            ls.clear()
            ls.setItem(key, data)
        }

    }

    function removeItem (key) {
        ls.removeItem(key)
    }

    function clear () {
        ls.clear()
    }

    window.cacheStorage = {//浏览器支持使用localStorage，不支持输出提示语
        getItem: ls ? getItem : oops,
        setItem: ls ? setItem : oops,
        removeItem: ls ? removeItem : oops,
        clear: ls ? clear : clear
    }
})()
</script>

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

1、了解 IndexedDB 数据库

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

2、创建数据库和表

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

二、HTML5拖拽

0x1 传统方法

实现鼠标事件位置的4种方式

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属性也可以使用.上面的这些单位，也是默认单位是像素。

<svg width="800" height="600"></svg> //默认是像素800px

常用单位：

- 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参数以及图解

align参数的3×3种个组合取值（有规律）

meetOrSlice参数

0x3 SVG坐标系统

世界坐标系统
计算机图形学中的世界坐标系
最初坐标系统
SVG图像自动画的坐标系统
用户坐标系统（白框）

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的左上角。

单纯地位移来讲，无论你相对于哪个位置，实际偏移的位置都是一样的，因此，从表现上讲，两者最终的位置看上去还是一样的。

SVG transform rotate旋转

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

SVG transform rotate旋转
SVG元素默认是SVG左上角为中心变换。
SVG transform scale缩放

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

SVG transform scale缩放
HTML元素的缩放是相对自己的中心点，SVG元素的缩放是相对SVG的左上角。

当SVG元素缩放时，整个坐标系被缩放，导致元素在视窗中重新定位

徐念安

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录