H5-12.14新标签及canvas画布基础

1. video标签

      如果当前浏览器不支持video，可以在veido里面编写提示内容
      src - 引入视频文件的路径
      autoplay - 自动播放视频
   

2. souce元素

3. video支持的视频格式

   MP4 - 目前比较主流
   OGG - 多用于移动端
   WebM - 目前唯一支持超高清格式
   在HTML页面中支持超高清格式HTML5
   由Google公司推出

4. vedio元素的属性

   src - 视频路径
   autoplay - 自动播放
   controls属性 - 提供视频播放的控制面板，只有属性名，没有属性值
   loop - 视频的循环播放
   poster属性 - 在视频播放之前，显示一张图片
   width/height - 设置显示视频的宽度和高度

   preload - 预加载
   auto-(默认值)自动加载
   none-不加载
   metadata-只加载视频的基本信息(不含视频)
   二、视频处理- 高级内容

5. 方法

   play() - 播放视频
   pause() - 暂停视频
   load() - 重新加载音频/视频元素
   canPlayType() - 判断当前浏览器是否支持指定视频格式

6. 事件

   onplay - 当视频开始播放时调用
   onpause - 当视频暂停时触发
   onended - 当视频结束时被触发
   onerror - 当视频错误时被触发
   oncanplay - 当整个媒体可以顺利播放时，就会触发这个事件
   oncanplaythrough - 不考虑整体状态，只要下载了一定的可放帧会会触发这个事件
   onprogress - 用于更新媒体的下载进度，会周期性的触发

7. 属性

   paused - 表示判断当前是否暂停，true表示暂停
   ended - 表示判断当前视频是否播放完毕，true表示播放完毕
   duration - 表示当前视频的时长,单位为s
   currentTime - 表示当前视频播放的位置

三、音频处理

1. audio元素

   第一种：只支持一种音频格式

   第二种： 同时引入多个音频格式

2. audio元素支持的音频格式

   MP3 - 目前最主流
   OGG
   WAV

四、Canvas(画布) - 简单内容

1、 Canvas在HTML页面提供画布的功能
可以在页面中绘制各种图形
2、 canvas绘制的图形与HTML页面无关
无法通过DOM获取绘制的图形
无法为绘制的推行绑定DOM事件
3、 只能使用canvas提供的API
4、 如何使用canvas

   1）在HTML页面中定义元素
       
       默认宽度 300*150
       效果上类似于div

       问题：

         定义canvas元素的宽度和高度

            style设置-绘制图形被拉伸

            属性方式 - 没有任何问题

   2）获取元素

   3）获取画布对象
       getContext("2d");
       参数类型是string类型，参数必须是“2d”或“3d”(固定写法)

   4）使用Canvas提供的API

       context.fileRect(10,10,100,100);

五、Canvas(画布) - 高级内容

1. API提供的工具非常广泛，包括创建图形、颜色、文本等

2. 矩形

      1）绘制实心矩形
   
        fillRect(x,y,width,heigth)
   
       2）绘制空心矩形
   
         strokeRect(x,y,width,heigth)
   
      3）清除指定区域的像素，类似于橡皮擦
   
        clearRect(x,y,width,height)
   

代码展示：

Paste_Image.png

3. 设置颜色 - 如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色

   1）声明形状线条的颜色
   strokeStyle

   2）声明形状内部区域的颜色
   fillStyle

   3）透明度属性。可以设置画布上图形的透明度
   globalAlpha