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

作者: 冬天不爱洗头 | 来源:发表于2016-12-14 20:59 被阅读0次

H5-12.14新标签及canvas画布基础
(17.05.24)(45)canvas!!!
Canvas绘制线条(掌握)
h5 新特性
Canvas
canvas标签/上下文绘制路径/描边/填充绘制矩形/弧形/
HTML5 Canvas
android绘图之Canvas基础（2）
使用 canvas 绘图的几种方法
Canvans 的常规操作

video标签

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

souce元素

  <vedio>
     <source src="一种视频格式"/>
     <source src="一种视频格式"/>
     <source src="一种视频格式"/>
  </vedio>

video支持的视频格式

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

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

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

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

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

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

三、音频处理

audio元素

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

<audio src="音频文件路径"></audio>

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

<audio>
  <source src="一种音频格式">
  <source src="一种音频格式">
  <source src="一种音频格式">
</audio>

audio元素支持的音频格式

MP3 - 目前最主流
OGG
WAV

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

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

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

       问题：

         定义canvas元素的宽度和高度

            style设置-绘制图形被拉伸

            属性方式 - 没有任何问题

   2）获取<canvas>元素

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

   4）使用Canvas提供的API

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

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

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

矩形

   1）绘制实心矩形

     fillRect(x,y,width,heigth)

    2）绘制空心矩形

      strokeRect(x,y,width,heigth)

   3）清除指定区域的像素，类似于橡皮擦

     clearRect(x,y,width,height)

代码展示：
<body>
<canvas width="500px" height="500px">

            </canvas>
        </body>
          <script>

            var canvas=document.getElementsByTagName('canvas')[0];
            var context=canvas.getContext("2d");
            context.strokeRect(50,50,400,400);
            context.strokeRect(50,50,150,150);
            context.strokeRect(300,50,150,150);
            context.strokeRect(50,300,150,150);
            context.strokeRect(300,300,150,150);
            context.clearRect(50,50,150,150);
            context.clearRect(49,49,150,150);
            context.clearRect(301,49,150,150);
            context.clearRect(49,301,150,150);
            context.clearRect(301,301,150,150);

           </script>