H5 API

1.HTML5新特性

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

1.1媒体元素

1.1.1 video

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

1.1.2 audio音频

audio元素与video类似,用来播放音频的。其属性方法事件也几乎与video元素一致。
当不加control时相当于背景音乐

1.2 canvas

(1)掌握canvas元素的基本概念,学会如何在页面上放置一个canvas元素,如何使用canvas元素绘制出一个简单的矩形
(2)掌握使用路径的方法,能够利用路径绘制出圆与多边形
(3)掌握渐变图形的绘制方法,学会图形变形,图形缩放,图形组合,以及给图形绘制阴影的方法
基本用法
(1)获取canvas对象--获取画布
    通过document.getElementById()等方法取得canvas对象
(2)获取上下文--获取画布
    图形上下文是一个封装了很多绘图功能的对象,参数只能是"2d"
    var context = canvas.getContext("2d");
(3)定义填充样式
    context.fillStyle="red";
(4)绘制填充图形
    context.fillStyle(10,10,100,100);
//第一个参数是x轴开始的位置,第二个参数是y轴开始的位置,第三个参数是绘制图形的宽,第四个参数是绘制图形的高

1.2.1 绘制填充矩形(fillRect)


    


1.2.2 绘制轮廓矩形/边框矩形


    

1.2.3 绘制圆


    

1.2.4 圆移动


    

你可能感兴趣的