Web前端学习—HTML5API-优快云博客

本文链接：https://blog.youkuaiyun.com/Tmengxing/article/details/106387775

这篇博客详细介绍了HTML5的API，包括音/视频元素的方法、属性和事件，如play(), pause(), load()等。此外，还深入探讨了canvas画布的使用，如绘制矩形、圆形、渐变和图像，以及如何进行图像平铺。最后，文章讲解了拖放API的工作原理和实现，包括如何设置拖放元素和目标元素，以及如何处理拖放事件。" 121050339,10902542,SQL Server数据库创建与管理实践,"['sqlserver', '数据库', 'database']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

音/视频
HTML5 DOM为 video、audio 元素提供了方法、属性以及事件

方法：
      play()   开始播放音/视频
      pause()    暂停当前的音/视频
      load() 重新加载音/视频
属性
autoplay 设置在在加载完毕后是否立即播放音/视频
true 立即播放
false 不播放【默认】
controls 设置音/视频是否显示控件(比如播放/暂停等)
标准的音视频控件包括：
播放
暂停
进度条
音量
全屏切换（供视频）
字幕（当可用时）
轨道（当可用时）

currentTime : 返回音/视频当前播放的位置（以秒计时）
volume : 返回音/视频的当前音量（取值为0~1） 0 静音，1 默认最高音量
playbackRate ：返回音/视频的当前播放速度。 1.0 正常速度【默认】，0.5 半速，2.0 倍速
duration 返回音/视频的总长度（以秒计）
paused 返回视频是否暂停，如果是，返回true，否则返回false

<script>
    window.onload = function(){
      var btnDiv = document.getElementById('btn-div');
      var video = document.getElementsByTagName('video')[0];
      //1.事件代理
      btnDiv.onclick = function(event){
        var text = event.target.innerText;
        if(text == '播放'){
            video.play();
        }
        if(text == '暂停'){
          video.pause();
        }
        if(text == '刷新'){
          video.load();
        }
        if(text == '快进'){
          // currentTime  当前正在播放的时间位置
          video.currentTime+=5;
        }
        if(text == '快退'){
          video.currentTime-=5; 
        }
        if(text == '快倍速'){
          // playbackRate  当前播放速度
          video.playbackRate = 1.5;
        }
        if(text == '慢倍速'){
          video.playbackRate = 0.5;
        }
      }
    
      //2.通过上下键操控音量 volume，左右键操控快进退currentTime
      document.onkeydown = function(event){
        var keydown = event.keyCode;  //获取按键的Unicode码
        // 上下  左右
        if(keydown == 38){
          if(video.volume+0.2>1)
            video.volume = 1;
          else video.volume+=0.2;
        }
        if(keydown == 40){
          if(video.volume-0.2<0)
            video.volume = 0
          else video.volume-=0.2;
        }
        if(keydown == 37){
          video.currentTime-=5;
        }
        if(keydown == 39){
          video.currentTime+=5;
        }
      }
      
      // 当播放和暂停放在同一个按钮上
      // 根据按钮的text内容值判断是否播放
      var toggleBtn = document.getElementById('toggle');
      toggleBtn.onclick = function(){
        if(this.innerText == '播放'){
          this.innerText = '暂停';
          video.play();
        }else{
          this.innerText = '播放';
          video.pause();
        }
      }
     
     //根据暂停状态 paused判断是否播放   暂停 true,播放 false
      var toggleBtn2 = document.getElementById('toggle2');
      toggleBtn2 .onclick = function(){
        // paused  是否为暂停状态
        // console.log(video.paused)
        if(video.paused){
          video.play();
        }else{
          video.pause();
        }
      }
      // 获取视频播放的百分比（进度）
      // 视频当前播放时间，视频长度，百分比存储到浏览器
      var perBtn = document.getElementById('percent');
      perBtn.onclick = function(){
        // duration 视频总长度
        var total = video.duration;
        console.log(total)
        // 视频当前播放位置
        var current = video.currentTime;
        //计算出的百分比    toFixed  截取的小数位数
        var result = (current/total*100).toFixed(2)+'%';
        var currentDiv = document.getElementById('currentDiv');
        currentDiv.innerText = result;
      }
}
</script>


<body>
  <!-- controls 显示控件 -->
  <video src="./1.mp4" controls style="width: 500px;"></video>
  <div id="btn-div">
    <button>播放</button>
    <button>暂停</button>
    <button>刷新</button>
    <button>快进</button>
    <button>快退</button>
    <button>快倍速</button>
    <button>慢倍速</button>
  </div>
  <div>
    <button id="toggle">播 放</button><br>
    <button id="toggle2">播放或暂停</button><br>
    <button id="percent">获取播放进度</button>
    <div id="currentDiv"></div>
  </div>
</body>

画布 (vscode下载提示插件 canvas-snippets ，编写时可进行提示)
HTML5的canvas标签用于绘制图像(通过脚本，通常是JavaScript)，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成(它仅仅是图形的容器)，必须使用脚本来完成实际的绘制任务

绘制矩形的步骤
1)、取得canvas对象
2)、取得2d上下文对象(context) : getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
3)、设定绘图样式
fillStyle 填充样式
strokeStyle 边框样式
4)、指定线宽
使用图形上下文对象中的lineWidth
5)、绘制矩形
fillRect(x,y,width,height) 填充矩形
参数：起点x坐标，y坐标，宽、高
strokeRect(x,y,width,height) 边框矩形

<script>
   window.onload = function(){
            // 1、获取canvas对象
            var canvas = document.getElementById('canvas');
            // 2、获取2d上下文
            var context = canvas.getContext('2d');
            // 3、设定样式
            context.fillStyle = 'red';
            context.strokeStyle = 'blue';
            // 4、指定线宽
            context.lineWidth = 4;
            // 5、绘制矩形
            // 填充矩形
            context.fillRect(100,100,100,100);
            // 边框矩形
            context.strokeRect(300, 100, 100, 100);
    }
</script>

<body>
    <canvas id="canvas" width="600" height="400" style="border: 1px solid #333;"></canvas>
</body>

效果图：
在这里插入图片描述

绘制圆形
1)、取得canvas对象
2)、取得2d上下文对象(context)
3)、设定绘图样式
fillStyle 填充样式
strokeStyle 边框样式
4)、指定线宽：使用图形上下文对象中的lineWidth
context.lineWidth
5)、开始创建路径
context.beginPath()
6)、设置路径
context.arc(x, y, radius, Math.PI / 180 * startAngle, Math.PI / 180 * endAngle, anticlockwise);
参数：圆心x坐标，y坐标，半径，开始角度，结束角度，绘制方向(false时为逆时针，true为顺时针【默认值】)
Math.PI 是180度
角度弧度的计算 Math.PI / 180 * startAngle
7)、关闭路径
context.closePath();
8)、设定绘制样式，进行图像绘制
fill() 填充圆
stroke() 描边圆

<script>
    window.onload = function(){
      // 1、获取canvas对象
      var canvas = document.getElementById('canvas');
      console.log(canvas)
      // 2、获取2d上下文
      var context = canvas.getContext('2d');
      // 3.绘制样式
      context.fillStyle='red';
      context.strokeStyle='blue';
      // 4.指定线宽
      context.lineWidth=4;
      // 5.开始创建路径
      context.beginPath();
      // 6、设置路径
      context.arc(200, 200, 100, Math.PI / 180 * 0, Math.PI / 180 * 180);
      // 7、关闭路径
      context.closePath();
      // 8、设定绘制样式，进行图像绘制
      context.fill();
      context.stroke();
    }
</script>

效果图：
在这里插入图片描述

绘制渐变
绘制线性渐变时，需要使用LinearGradient对象，通过2d上下文来创建和修改
1). 获取canvas对象
2). 获取2d上下文
3). 创建渐变对象
var gradient = context.createLinearGradient(x1, y1, x2, y2);
参数：起始点的x坐标，y坐标，结束点的x坐标，y坐标
4). 添加渐变颜色
gradient.addColorStop(number,‘color’);
例：gradient.addColorStop(1, ‘yellow’);
参数：number表示0-1之间的偏移量 , color 颜色值
注意：添加渐变颜色的时候，需要添加至少两个颜色才会有渐变的效果
5). 设置填充渐变
context.fillStyle = gradient;
6). 使用渐变绘制矩形
context.fillRect(x,y,width,height);

<script>
     window.onload = function(){
      // 1、获取canvas对象
      var canvas = document.getElementById('canvas');
      // 2、获取2d上下文
      var context = canvas.getContext('2d');
      // 3.创建渐变对象
      var gradient = context.createLinearGradient(0, 150, 400, 150);
      // 4.添加渐变颜色和偏移量  参数1取值在 0~1之间
      gradient.addColorStop(0, 'red');
      gradient.addColorStop(1, 'yellow');
      // 5.使用渐变对象
      context.fillStyle = gradient;
      // 6.绘制矩形
      context.fillRect(0,0,400,300);
     }
</script>

绘制变形
1). 平移坐标轴
     context.traslate(x,y);
     x:坐标原点在x轴方向上移动的单位
     y:坐标原点在y轴方向上移动的单位
2). 放大缩小坐标轴
     context.scale(x,y);
     x:水平方向上的放大倍速
     y:垂直方向上的放大倍速
     如果要缩小，将两个参数设置为0~1之间的小数即可
3). 旋转坐标轴
     context.rotate(angle)   angle : 旋转弧度

 <script>
     window.onload = function(){
      // 1、获取canvas对象
      var canvas = document.getElementById('canvas');
      // 2、获取2d上下文
      var context = canvas.getContext('2d');
      context.fillStyle='red';
      
      context.fillRect(0,0,100,100);
      // 平移
      context.translate(100, 100);
      context.fillRect(0,0,100,100);
</script>

绘制图像
1. 创建图像对象
  var image = new Image();
  image.src = ‘./xx.jpg’
2. 绘制图像
  context.drawImage(image,x,y);
  参数：图片对象，绘制位置的起始x坐标，绘制位置的起始y坐标
  
  context.drawImage(image,x,y,w,h);
  参数：图片对象，绘制位置的起始x坐标，绘制位置的起始y坐标，绘制图像的宽，高
  
  注意：
  在绘制图片时，需要在图片加载完毕之后，也就是使用image.onload = function(){}
3. 图片平铺
  createPattern(image,type)
  参数：image对象，平铺类型 (第二个参数不可以省略)
  type 平铺类型分为如下几种：
  no-repeat 不平铺
  repeat-x 横向平铺
  repeat-y 纵向平铺
  repeat 全方向平铺
绘制文本
在HTML5API中，可以在canvas画布中进行文字的绘制，同时也可以对绘制的文字进行样式的设置(大小、对齐方式等)

font 设置文本字体
    context.font = ‘10px sans-serif’;
textAlign 文本对齐方式
    context.textAlign = ‘start | left | center | right |end’;
fillText(text,x,y,width) 使用fillStyle属性绘制填充文本
    context.fillText(text, x, y, maxWidth);
strokeText(text,x,y,width) 使用strokeStyle属性绘制描边文本

拖放API

拖放是一种常见的特性，即抓取一个对象以后拖动到另一个位置，它属于HTML5API的一部分，任何元素都可以拖放

    如果需要拖动某一个元素，需要先将该元素设置为可拖动
    draggable 是否可拖动
         true 可以拖动
         false 不可以拖动

拖动元素
需要移动位置的元素
dragstart 开始拖动
drag 正在拖动
dragend 结束拖动
目标元素
需要放置的地点
dragenter 拖动元素进入到目标元素
dragover 拖动元素在目标元素中移动
drop 拖动元素放置到了目标元素中
拖放流程
dragstart -> drag -> dragenter -> dragover -> drop -> dragend

问题：如何实现将拖动元素拖放到一个指定的容器中？
注意：有些元素不允许被放置元素，所以此时需要将该元素设置为有效的目标元素(也就说可以被放置其他元素)
方法：重写目标元素中的dragover事件，阻止默认行为即可
parent.ondragover = function(){
event.preventDefault();
}
```
   拖动时，需要知道被拖动的元素是谁？
   ->
   可以根据id、class等方式获取到元素
   ->
   如何获取到id、class？ 
   ->
   dataTransfer对象
```
方法：
event.dataTransfer.setData(key,value)     设置值，在dragstart时使用
event.dataTransfer.getData(key)     获取值，在drop时使用
clearData()     删除所有的数据，在dragstart时使用

<script>
   window.onload = function(){
       // 选中目标元素
       var parent = document.getElementsByClassName('parent')[0];
       // 选中拖动元素
       var childs = document.getElementsByClassName('child');
       // 将类数组对象转为数组
       childs = Array.from(childs);
       // 遍历数组
       childs.forEach(function(item){
           // 拖动元素上的开始拖动事件
           item.ondragstart = function(){
               console.log('ondragstart');
               // 设置id
               event.dataTransfer.setData('id',this.id);
           }
           // 拖动元素上的正在拖动事件
           item.ondrag = function(){
               console.log('ondrag');
           }
           // 拖动元素上的结束拖动事件
           item.ondragend = function(){
               console.log('ondragend');
           }
       })

       // 拖动元素进入到目标元素时的事件
       parent.ondragenter = function(){
           console.log('ondragenter');
       }
       // 拖动元素在目标元素中移动的事件
       parent.ondragover = function(){
           // 阻止事件的默认行为，即将该元素设置为可被放置其他元素
           event.preventDefault();
           console.log('dragover');
       }
      // 拖动元素放置到目标元素时的事件
        parent.ondrop = function(){
            console.log('ondrop');
            // 获取id
            var id = event.dataTransfer.getData('id');
            // 根据id获取到当前拖动的元素
            var dom = document.getElementById(id);
            this.appendChild(dom);
        }
      }
</script>

<body>
    <!-- 目标元素 1个parent-->
    <div class="parent"></div>
    <!-- 拖动元素 4个child -->
    <!-- draggable="true"将元素设置为可拖动 -->
    <div class="child" id="one" draggable="true">1</div>
    <div class="child" id="two" draggable="true">2</div>
    <div class="child" id="three" draggable="true">3</div>
    <div class="child" id="four" draggable="true">4</div>
</body>
<style>
    .parent {
        border: 1px solid #333;
        height: 200px;
        margin: 10px;
    }
    .child {
        width: 100px;
        height: 100px;
        border: 1px solid #333;
        float: left;
        margin: 10px;
    }
</style>

问题：上述代码实现了拖动元素放入容器中，但是拖入后无法进行拖动到其他任意位置，该如何实现？

可设置拖放时的视觉效果
    effectAllowed 在dragstart使用
    dropEffect 在dragover使用
    取值： link、copy、move

由于dragenter、dragend、drag无实际操作，所以可以省略

<script>
    window.onload = function(){
         // 选中目标元素，将body元素也放入目标元素中，可拖入拖出
         var body = document.body;
         var parents = document.getElementsByClassName('parent');
         parents = [...parents];
         parents.push(body);
         // 选中拖动元素
         var childs = document.getElementsByClassName('child');
         childs = [...childs];

         childs.forEach(function(item){
             item.ondragstart = myDragStart;
         })
         parents.forEach(function(item){
             item.ondragover = myDragOver;
             item.ondrop = myDrop;
         })
         
         // 声明事件处理函数
         function myDragStart(event){
             event.dataTransfer.setData('id',this.id);
             // event.dataTransfer.effectAllowed = 'link';
             // event.dataTransfer.effectAllowed = 'copy';
             event.dataTransfer.effectAllowed = 'move';
         }
         function myDragOver(event){
         
             event.preventDefault();
             // event.dataTransfer.effectAllowed = 'link';
             // event.dataTransfer.dropEffect = 'copy';
             event.dataTransfer.dropEffect = 'move';
         }
         function myDrop(event){
             // 阻止冒泡,不阻止的话拖动的位置都是最外层，即body内
             event.stopPropagation();

             var id = event.dataTransfer.getData('id');
             var dom = document.getElementById(id);
             this.appendChild(dom);
         }
     }
</script>
   
<body>
    <!-- 目标元素 2个parent-->
    <div class="parent"></div>
    <div class="parent"></div>
    <!-- 拖动元素 4个child -->
    <!-- draggable="true"将元素设置为可拖动 -->
    <div class="child" id="one" draggable="true">1</div>
    <div class="child" id="two" draggable="true">2</div>
    <div class="child" id="three" draggable="true">3</div>
    <div class="child" id="four" draggable="true">4</div>
</body>
<style>
    .parent {
        border: 1px solid #333;
        height: 200px;
        margin: 10px;
    }
    .child {
        width: 100px;
        height: 100px;
        border: 1px solid #333;
        float: left;
        margin: 10px;
    }
    html,body{
        height: 100%;
    }
</style>