Html API总结

2024年5月15日 137次阅读 来源: 李春雨

简单梳理HTML5中常见的API

1. dataset 自定义属性集合

可以为标签添加自定义属性，这些属性使用”data-“作为前置，随后这些属性就会被保存到dom对象的dataset属性中。该属性是DOMStringMap类型的键值对。可以像访问普通对象一样对其进行访问。

    <div id="one" data-name='terry' data-age='12'>
        hello
    </div>
    
    <script>
        var one = document.getElementById('one');
        //访问dataset集合
        console.log(one.dataset);
        //遍历dataset集合
        for(var key in one.dataset){
            var val = one.dataset[key];
            console.log(key,val);
        }
    </script>

2. video/audio

video元素用于播放视频或电影。使用这个元素就无需使用其他任意的插件，只需要使用支持HTML5的浏览器即可。audio元素用于播放音乐。

  • 使用方法：
<!--通过src指定一个视频地址-->
<video src="resource/demo.mp4" type="video/mp4" controls autoplay></video>

<!--通过source元素为同一个媒体数据指定多个播放格式与编码方式，确保浏览器可以从中选择一种自己支持的播放格式-->

<video autoplay controls>
    <source src="resource/demo_1.mp4" type="video/mp4">
    <source src="resource/demo_2.mp4" type="video/mp4">    
</video>

<!--音乐-->
<audio src="resource/demo_3.mp3" type="audio/mpeg" controls></audio>

  • 设置属性：

    1. width:视频的宽度，以像素为单位
    2. height:视频的高度，以像素为单位
    3. src: 视频的地址
    4. controls:控制条
    5. autoplay:设置自动播放
    6. poster: 当视频不可用时，向用户展示一副替代用的图片
    7. loop: 是否循环
    8. defaultPlaybackRate:默认播放速率
    9. playbackRate:当前播放速率
    10. volume:音量，取值为0~1
    11. muted:是否处于静音状态
    12. type:媒体类型

  • 只读属性

    1. currentSrc :读取播放中的媒体数据的URL地址
    2. readyState : 准备状态
      0 没有获取到媒体的任何信息
      1 获取媒体数据无效，无法播放
      2 当前帧已获得，但还未获取到下一帧数据
      3 当前帧已获得，也获取到下一帧数据
      4 当前帧已获得，也获取到了让播放器前进的数据
    3. currentTime（可读写）/duration:
      当前播放位置、总的播放时间
    4. played、paused、ended
      已经播放的时间段、是否暂停、是否播放完毕

  • 方法

    1. play()、
    2. pause()、
    3. load()、
    4. canPlayType()

  • 事件

    1. loadstart 浏览器开始在网上寻找媒体数据
    2. progress 浏览器正在获取媒体数据
    3. suspend 浏览器暂停获取媒体数据
    4. abort 浏览器在下载完全部媒体数据之前中止获取媒体数据，非错误引起
    5. error 获取媒体数据过程中出错
    6. emptied 所在网络变未初始化状态
    7. stalled 浏览器舱室获取媒体数据失败
    8. play 即将开始播放
    9. paused 播放暂停
    10. loadedmetadata 浏览器已经获取完毕媒体时间长和字节数
    11. loadeddata 浏览器已加载完毕当前播放位置的媒体数据，准备播放
    12. waiting 播放过程中由于得不到下一帧而停止播放
    13. playing 正在播放
    14. canplay 正在播放，并且以当前播放速率能够将媒体播放完毕，需缓存
    15. canplaythrough 浏览器可以播放媒体，并且以当前播放速率能够将媒体播放完毕，无需缓存
    16. seeking 请求数据，seeking属性为true
    17. seeked 停止请求数据，seeking属性为false
    18. timeupdate 当前播放位置改变
    19. ended 播放结束
    20. ratechange 播放速率改变
    21. durationchange 播放时长改变
    22. volumechange 音量改变

3. canvas 画布

canvas专门用来绘制图形，在页面中放置一个canvas元素，相当于在页面上放置了一块”画布”，可以在其中进行图形的描绘

3.1 绘制矩形

要想在画布中绘制一个矩形，需要执行以下操作：1.添加canvas元素；2.获取canvas对象；3.取得上下文；4.设定绘图样式；5.绘制

    <!--1. 添加canvas元素-->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        // 2. 获取画布对象
        var canvas = document.getElementById('canvas');
        // 3. 获取画布上下文环境
        var context = canvas.getContext('2d');
        // 4. 设置绘图样式
        context.strokeStyle = "#dddddd";
        context.fillStyle = "#ededed";
        // 5. 进行绘制
        context.fillRect(0,0,100,100);
        context.strokeRect(0,0,110,110);
        // 擦除矩形
        context.clearRect(0,0,50,50);
    </script>

3.2 绘制圆形

要想绘制其他图形，需要使用路径。

     <!--1. 添加canvas元素-->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        // 2. 获取画布对象
        var canvas = document.getElementById('canvas');
        // 3. 获取画布上下文环境
        var context = canvas.getContext('2d');
        // 4. 设置绘图样式
        context.strokeStyle = "#dddddd";
        context.fillStyle = "#ededed";
        context.lineWidth= 3;
        // 5. 圆形绘制
        context.beginPath();
        context.arc(200,200,50,0,Math.PI*2,true);
        context.closePath();
        context.stroke();
    </script>

3.3 绘制渐变图形

var g = context.createLinearGradient(xStart,yStart,xEnd,yEnd);
线性渐变

（xStart,yStart）渐变起始点
（xEnd,yEnd）渐变结束点

var g = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
g.addColorStop(offset,color)

offset为所设定的颜色离开渐变起始点的偏移量（0~1）
color为绘制时使用的颜色
        // 1.画布对象
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        // 2. 创建渐变对象
        var g = context.createLinearGradient(0,0,100,100);
        // 3. 由于是渐变，需要添加两个颜色
        g.addColorStop(0.5,'rgb(255,255,0)');
        g.addColorStop(1,'rgb(0,255,255)');
        context.strokeStyle = "#dddddd";
        // 4. 指定填充色为渐变色
        context.fillStyle = g;
        // 5. 绘制矩形
        context.fillRect(0,0,100,100);
        context.strokeRect(0,0,110,110);
        context.clearRect(0,0,50,50);

3.4 绘制变形图形

平移

context.translate(x,y);

扩大

context.scale(x,y);

旋转

context.rotate(angle);

3.5 API

fillReact(x,y,width,height)

填充矩形

strokeRect(x,y,width,height);

绘制矩形边框

arc(x,y,radius,startAngle,endAngle,anticlockwise)

绘制圆路径
startAngle     开始角度
endAngle       结束角度
anticlockwise  是否按顺时针方向绘制

moveTo(x,y)

设置原点

lineTo(x,y)

设置终点

4. Web Storage

有时候我们需要在浏览器中暂时的保存一些信息，例如，登录后的用户信息。这时候可以使用sessionStorage,localStorage

4.1 sessionStorage

会话存储，也就是数据维持到一次会话中，即用户打开浏览器访问该网页到用户关闭浏览器。换句话说就是用户浏览这个网站所花费的时间
sessionStorage.setItem(key,val);

设置值

sessionStorage.getItem(key);

获取值

sessionStorage.removeItem(key);

移除值

sessionStorage.clear();

清空

4.2 localStorage

本地存储，数据会保存到浏览器中，及时浏览器关闭，数据依旧存在
localStorage.setItem(key,val);

设置值

localStorage.getItem(key);

获取值

localStorage.removeItem(key);

移除值

localStorage.clear();

清空
    原文作者：李春雨
    原文地址: https://segmentfault.com/a/1190000014699934
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞