H5API媒体、画布（canvas）

HTML5新特性

1. 标签:nav article footer header aside.....
2. 表单新特性:input type取值date time week email number
3. 表单属性required readonly disabled
4. 表单控件标签:progress datalist ...

h5新增特性

1. 语义化标签：header article footer section nav
2. 表单控件：number date time email url search
3. 音频和视频：audio video
4. 本地离线存储：localStorage sessionStorage cookies
5. 画布：canvas

对html语义化标签或者语义化的理解

1. 使页面内容结构化、便于浏览器、搜索引擎解析；
2. 即使没有css样式也以一种文档格式显示、并且容易阅读；
3. 有利于搜索引擎优化；
4. 便于阅读、维护和理解。

src和href的区别

1. href是超文本引用，它是指向资源的位置，建立与目标文件的联系；
2. src目的是把资源下载到页面中。

自定义数据属性

data-xxx 是一类被称为自定义数据属性的属性，它赋予我们在所有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>

媒体元素

video视频

1.属性

1.属性
1.进度条controls
<video src="./音视频/1.mp4"  controls> </video>
2.页面一加载是否自动播放autoplay
<video src="./音视频/1.mp4"  controls autoplay> </video>
3.poster封面
<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.方法 

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.事件

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

audio音频

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

画布

使用方法：

1. 获取画布 canvas

2. 获取上下文对象 canvas.getContext('2d');

3. 绘制图形填充样式

fillStyle='red';

stokeStyle='red';

4. 绘制图形

fillRect(0,0,400,400)
stokeRect(0,0,400,400)

绘制填充矩形

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();

}

圆的移动

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);
            }
        }

线性渐变 createLinearGradient 

window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取画笔
            var context=canvas.getContext('2d');
            // 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置
            var g=context.createLinearGradient(0,0,400,400)
            // 添加渐变色
            g.addColorStop(0,'red')
            g.addColorStop(0.5,'cyan')
            g.addColorStop(1,'yellow');
            // 将渐变色给到填充样式
            context.fillStyle=g;
            context.fillRect(0,0,400,400);
        }

径向渐变 createRadialGradient 同心圆渐变

window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取画笔
            var context=canvas.getContext('2d');
            // 声明一个渐变对象 前三个参数小圆心x轴开始位置 y轴开始位置 半径 后三个参数大圆心x轴开始位置 y轴开始位置 半径
            var g=context.createRadialGradient(200,200,50,200,200,200)
            // 添加渐变色
            g.addColorStop(0,'red')
            g.addColorStop(0.5,'cyan')
            g.addColorStop(1,'yellow');
            // 将渐变色给到填充样式
            context.fillStyle=g;
            context.fillRect(0,0,400,400)
   }

绘制线段

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';
        	context.stroke();

}

绘制图像

 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)
               //告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定得回调函数更新动画
           }
}

绘制文本

context.font = '28px blod';
context.fillText('str', 100, 100);
// context.strokeText('str', 100, 100);