H5API

HTML5新特性
标签:nav article footer header aside.....
表单新特性:input type取值date time week email number
表单属性 form formaction(提交地址) frommethod(提交方式) required readonly disabled
表单控件标签:progress meter datalist

1.H5API (HTML5中的js部分)

在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video>
媒体(音频视频)
画布
拖拽
本地存储
sessionStorage
webSocket

1.1自定义数据属性

data-id 是一类被称为自定义数据属性的属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力宁可以通过HTML和DOM进行专有数据的交换。所有的属性都可以通过HTMLElement.prototype.dataset来访问.自定义属性都可以保存到dataset中。
获取属性
    document.getAttribute
     $(dom).attr()
     dom.dataset

<script>
        window.onload=function(){
            var div=document.querySelector('#one');
            console.log(div.dataset)
            console.log(div.dataset.id)
            console.log(div.dataset.item)
        }
</script>
  <div id="one" flag='two' data-id='1001' data-item='test'></div>

1.2媒体元素

1.video
在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。
video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示
读写属性 src autoplay poster loop constrols width height 宽高一般不一起使用
constrols是控制条 loop是循环播放 autoplay是自动播放poster='' 封面放封面地址 muted静音
方法 play播放 pause暂停 paused切换，是否是暂停状态 volume控制音量 currentTime当前播放秒数 playbackRate倍数播放

1.属性
1.进度条controls
<video src="./音视频/1.mp4"  controls> </video>
2.页面一加载是否自动播放autoplay
<video src="./音视频/1.mp4"  controls autoplay> </video>
3.post封面
<video src="./音视频/1.mp4" poster='./img/1.jpg'> </video>
4.是否循环播放loop
<video src="./音视频/1.mp4" controls loop> </video>
5.muted静音
<video src="./音视频/1.mp4" controls loop autoplay> </video>

2.方法 
1.播放 play
 var video=$('video')[0];
 if($(this).text() === '播放'){
              video.play()
 }
2.暂停 pause
 if($(this).text()==='暂停'){
              video.pause()
  }
3.切换 paused 音视频是否是暂停状态
if($(this).text()==='切换'){
                    if(video.paused){
                        video.play()
                    }else{
                        video.pause()
                    }
}
4. // 控制音量+
   if($(this).text()==='音量+'){
      
       video.volume=(video.volume>0.9?0.9:video.volume )+0.1
   }
5.if($(this).text()==='音量-'){
        video.volume=(video.volume<0.1?0.1:video.volume)-0.1
   }
6.// 快进
 if($(this).text()==='快进'){
        video.currentTime+=5
  }
7.// 回退
  if($(this).text()==='回退'){
      video.currentTime-=5
 }
8.// 倍数播放
 if($(this).text()==='倍速播放'){
   video.playbackRate=0.5
 }

 3.事件
video.onvolumechange=function(){
                // console.log('音量改变事件监听')
                if(this.volume===0.5){
                    alert('继续调高声音会损伤耳膜')
                }
   }

2.audio音频
audio元素与video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致.

 <!-- 不加control相当于背景音乐 -->
<audio src="./音视频/1.mp3" controls loop autoplay></audio>

2.画布

1.掌握canvas元素的基本概念，学会如何在页面上放置一个canvas元素，如何使用canvas元素绘制出一个简单矩形
2.掌握使用路径的方法，能够利用路径绘制出圆形与多边形
3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法

1.基本用法
(1)获取canvas对象--获取画布
    通过document.getElementById()等方法取得canvas对象。
(2)取得上下文(context)--获取画笔
    图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
(3)定义填充样式
    context.fillStyle='red'
(4)绘制填充图形
    context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高

1.实例 --绘制填充矩形
//通过fillRect
window.onload=function(){
            //1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取画布上下文对象
            var context=canvas.getContext('2d');
            // 3.绘制填充样式
            context.fillStyle='red'
            // 4.绘制填充矩形
            context.fillRect(10,10,100,100)
}


//绘制轮廓矩形 边框矩形
window.onload=function(){
             //1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取画布上下文对象
            var context=canvas.getContext('2d');
               // 设置轮廓样式
            context.strokeStyle='red'
            // 设置轮廓的线宽
            context.lineWidth=4;
            // 绘制边框矩形或者轮廓矩形
            context.strokeRect(10,10,100,100);
            // 清楚一部分区域
            context.clearRect(0,0,50,50);
            // 清楚全部区域
            context.clearRect(0,0,400,400)
}

2.实例 --绘制圆
window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取画布上下文对象
            var context=canvas.getContext('2d');
            // 绘制圆直线曲线需要路径 开始路径
            context.beginPath();
            // 圆的路径 x y r 开始弧度 结束弧度 圆的方向是否是逆时针路径
            // Math.PI --180度
            context.arc(100,100,50,0,Math.PI,true);
            // context.arc(100,100,50,0,Math.PI/2);
            // 直线路径
            context.lineTo(100,100);
            context.lineTo(150,100);
            context.arc(300,300,50,0,Math.PI*2);
            // 结束路径
            // context.closePath();
            // 填充样式
            context.fillStyle='red'
            // 绘制填充圆
            context.fill();
            // 绘制轮廓
            // context.stroke();

}

3.实例 圆的移动
window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取画布上下文对象
            var context=canvas.getContext('2d');
            var bubble={
                x:100,
                y:100,
                r:50,
                color:'red'
            };
            draw(bubble);
            move(bubble)
            setInterval(function(){
                // 清除画布
                context.clearRect(0,0,600,600);
                move(bubble)
            },200)
            // 绘制方法
            function draw(bubble){
               context.beginPath();
               context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);
               context.fillStyle=bubble.color;
               context.fill()
            }
            // 移动
            function move(bubble){
                bubble.x+=5;
                bubble.y+=5;
                draw(bubble);
            }

        }

绘制

绘制线段
    moveTo(x,y):
        x,y:线段的起点坐标
    lineTo(x,y)
        x,y:线段的终点坐标
    cx.stroke();
    //fill():不能使用
    lineWidth=number;

// 绘制线段
    window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            // 绘制线段
            context.lineWidth=3
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(100,100);
            context.lineTo(200,10);
            context.lineTo(300,100);
            context.closePath();
            context.strokeStyle='red'
     }




变形
1.平移 
    translate(x,y):
    x,y:将坐标原点平移单位
2.扩大(放大坐标)
    scale(x,y):
        x:代表的是水平方向上的放大倍数
        y：代表的是垂直方向上的放大倍数（如果想要缩小，参数设置为0-1之间的值）
3.旋转
    rotate(angle):
        angle:旋转角度，旋转的中心点就是坐标轴的原点
        默认按照顺时针进行旋转，想要进行逆时针旋转，角度设置为负数即可
 4.保存和回滚
     [save1,save2,save3]
    save():将当前的绘画状态进行保存并存入状态栈
    restore():该方法每次调用只会回滚到上一次save的状态
  window.onload=function(){
             // 获取画布
             var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            context.fillStyle='red'
            // 绘制填充矩形
            context.save()
            context.fillRect(0,0,100,50);
            // 平移
            context.translate(100,100);
              保存一次
            context.save();
            // context.fillRect(0,0,100,50);
            context.scale(2,2);
            context.save()
            // context.fillRect(0,0,100,50);
            context.rotate(Math.PI/6);
            context.save()
            context.fillRect(0,0,100,50);
            context.restore();
            context.restore();
            context.restore();
            context.restore();
            context.fillRect(120,0,100,50)
        }

绘制文本    
    context.font='16px blod';
    fillText(str,x,y);
    strokeText(str,x,y);
        str:绘制文本字符串
        x,y:文本的显示坐标



绘制时针
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
             // 获取画布
             var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            // 绘制圆盘
            function clock(){
            context.beginPath();
            context.arc(300,300,200,0,Math.PI*2);
            context.fillStyle='pink'
            context.fill();
            context.closePath();
            // 绘制时刻度
            for(i=0;i<12;i++){
                context.save();
                context.translate(300,300);
                context.rotate(i*(Math.PI/6))
                context.beginPath();
                context.moveTo(0,-180);
                context.lineTo(0,-200);
                context.closePath();
                context.lineWidth=4;
                context.fillStyle='black';
                context.rotate(Math.PI/6);
                context.font='16px bold'
                context.fillText(i+1,-5,-220)
                context.stroke();
                context.restore();
            }
            // 绘制分刻度
            for(i=0;i<60;i++){
                context.save();
                context.translate(300,300);
                context.beginPath();
                context.rotate(i*(Math.PI/30))
                context.moveTo(0,-190);
                context.lineTo(0,-200);
                context.stroke();
                context.closePath();
                context.restore();
            }
            // 获取当前时间
            var today=new Date();
            var hour=today.getHours();
            var min=today.getMinutes();
            var sec=today.getSeconds();
            // 
            hour=hour+min/60;

            // 绘制时针
            context.lineWidth=4
            context.save();
            context.translate(300,300);
            context.rotate(hour*Math.PI/3);
            context.beginPath();
            context.moveTo(0,10)
            context.lineTo(0,-100);
            context.stroke()
            context.closePath();
            context.restore();
            // 绘制分针
            context.lineWidth=3
            context.save();
            context.translate(300,300);
            context.rotate(min*(Math.PI/30));
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-160);
            context.stroke()
            context.closePath();
            context.restore();
            // 绘制秒针 
            context.lineWidth=2
            context.save();
            context.translate(300,300);
            context.rotate(sec*Math.PI/30);
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-180);
            context.strokeStyle='red'
            context.stroke()
            context.closePath();
            context.restore();


            // 绘制交叉处
            context.lineWidth=1
            context.save();
            context.translate(300,300);
            context.beginPath();
            context.arc(0,0,5,0,Math.PI*2);
            context.fill();
            context.fillStyle='#ccc'
            context.strokeStyle='red'
            context.stroke()
            context.closePath();
            context.restore();
            }
            setInterval(clock,1000)
            clock()

        }
    </script>
</head>
<body>
    <canvas width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>

绘制图像
 window.onload=function(){
             // 获取画笔
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            // 创建img节点    绘制图片到画布中，图片dom节点，img节点绘制或者创建img节点
            var img=new Image();
            img.src='./2.jpg';
            img.onload=function(){
                // 绘制图片到画布中  从0,0点开始绘制图片，绘制一个200*200的图片
            context.drawImage(img,0,0,200,200);
            }
}

 绘制视频
window.onload=function(){
             // 获取画笔
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            var video=document.querySelector('video');
            draw()
               function draw(){
               context.drawImage(video,0,0,200,200);
                // 请求动画帧
               requestAnimationFrame(draw)
           }
}

拖拽

1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。
拖动事件：dragstart、drag、dragend
放置事件：dragenter、dragover、drop
拖拽事件流：
当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发
dragstart->drag->dragenter->dragover->drop->dragend
-----------------------------------------------------------------------
2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData

 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            height: 200px;
            border: 1px solid red;
        }

        .child {
            width: 100px;
            height: 100px;
            border: 1px solid rgb(94, 68, 211);
            float: left;
            margin: 10px;
        }

        body {
            height: 400px;
        }
    </style>

    <script>

        window.onload = function () {
            var parent = document.querySelector('.parent')
            var childs = document.querySelectorAll('.child')
            // console.log(childs);  是类数组
            //转化成数组
            childs = Array.from(childs)
            // console.log(childs);

            //每个child都有留个事件，所以用forEach来弄，减少代码冗余
            childs.forEach(function (item, idex) {
                // 开始拖放
                item.ondragstart = function (event) {
                    console.log('ondragstart开始拖放');
                    console.log('event是', event);
                    event.dataTransfer.setData('id', item.id);
                };
                // 正在拖放
                item.ondrag = function () {
                    console.log('ondrag正在拖放');
                }
                // 拖放结束
                item.ondragend = function () {
                    console.log('ondragend拖放结束');
                }
            });

            //parent放置事件 进入目标元素
            parent.ondragenter = function () {
                console.log('ondragenter进入目标元素');
            }
            //在放置对象中拖放
            parent.ondragover = function (event) {
                //取消事件默认行为    // 设置目标元素可放置
                event.preventDefault();
                console.log('ondragover在放置对象中拖放');
            }
            //将拖拽对象拖放到放置对象中
            parent.ondrop = function () {
                console.log('ondrop将拖拽对象拖放到放置对象中');
                //id  获取child节点id  也就是one
                // 获取数据传输对象内的数据，通过数据获取节点，放置节点
                var id = event.dataTransfer.getData('id')
                //选择dom节点  id="one"
                var dom = document.querySelector('#' + id)
                //追加节点
                this.appendChild(dom)
                //因为子元素的事件触发会触发父元素的触发事件
                //阻止事件冒泡
                event.stopPropagation();
            }



            
            //往body中拖放对象
            document.body.ondragover = function (event) {
                //取消事件默认行为  因为默认不给body放置对象的
                event.preventDefault()
            }
            //
            document.body.ondrop = function (event) {
                //id  获取child节点id  也就是one
                // 获取数据传输对象内的数据，通过数据获取节点，放置节点
                var id = event.dataTransfer.getData('id')
                // 因为id 是变量   要获取四个不同的dom节点  所以用拼接的形式
                var dom = document.querySelector('#' + id)
                //追加节点  this指的是body
                this.appendChild(dom)
            }
        }
    </script>
</head>

<body>
    <div class="parent"></div>
    <!-- draggable 属性规定元素是否可拖动-->
    <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>

</html>

H5API

H5API

1.H5API (HTML5中的js部分)

1.1自定义数据属性

1.2媒体元素

2.画布

绘制

拖拽

云绮棠兮

引用和评论

vue-print-nb打印只能打印一页？（已解决）

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

一个简易的DIY场景H5框架

使用 URLSearchParams 轻松操作 URL

svg之viewBox