关于HTML5(一)

HTML5core:
一.表单:
1.表单回顾:
2.form作用:提交数据。。。。。。
3.html5新表单元素和属性作用:接受数据之后进行验证 见day13.html
4.id.addEventListener("事件",函数名,true(捕获)/false(冒泡))面向对象封装思想。事件捕获一层一层由外到内一次传递事件 冒泡相反。

5.表单新的API:1.setCustomValidity("错误提示信息")设置用户自定义错误信息,使用后要有清除错误信息 setCustomValidity("")否则无法提交。          
         2.checkValidity()返回true false 只验证表单元素后添加的默认属性。
6.表单新事件:invalid
7.表单新验证属性:通过var varCheck=elem.validity调用 
状态:1.valid boolean值 总体有验证不通过 为true
2.valueMissing 值为空 为true
3.typeMismatch 格式不正确 为true
4.patternMismatch 正则不正确 为true
5.tooLong 大于max长度 为true
6.rangeUnderflow 小于min true
7.stepMismatch 步长不正确 为true
8.customError 设置了自定义错误 为true

二.多媒体对象:
1.视频:1.在HTML5中播放视频:<video controls width="" height="" autoplay loop poster preload=none/metadata/auto><source src="xxx.mp4"></video>
2.通过编程实现控制视频播放器为 了解决样式兼容性:
常用事件:1.progress事件: 看的视频缓存有变化时触发 一般不写此事件处理。
        2.canplaythrough事件:视频缓冲完毕可以顺利播放,只触发一次
     3.canplay事件:只要缓存了一点就触发,不考虑整体
     4.ended事件:媒体到达尾部时触发
     5.pause事件:暂停时触发
        6.play事件:播放时触发
     7.error事件:媒体播放出现错误时触发。
常用方法:1.play()2.pause()load()canPlayType(type)  用于更改视频播放器样式自定义
常用属性:1.paused 2.ended
     3.duration返回以秒计时的时

     4.currentTime 获取或设置媒体播放位置

      自定义视频播放器
2.音频:同视频操作
      自定义音频播放器
三.Canvas:
1.获取绘图上下文:
function drawCan() {
var can = $("canvas").getContext("2d");
}
2.在Canvas上绘图:
API: 1.1.can.fillRect(x,y,width,height)填充 can.clearRect() 擦除效果  can.strokeRect() 轮廓
1.2.can.scale(xScale,yScale); 取值范围:XScale:小于1 缩小 大于1 放大 等易于 原始
1.3 can.save()保存画布当前状态   can.restore()获取保存的状态   只能获取一次
14.can.translate(x,y) 改变画布的原点间接改变图位置
注:颜色在绘图之前设置
属性:1.strokeStyle 设置边 fillStyle 设置填充颜色 globalAlpha:透明度可用rgba()代替
绘制路径:
方法:stroke() fill()moveto(x,y)将笔触移动到位置 lineto(x,y)绘制直线

猜你喜欢

转载自www.cnblogs.com/liuguofu/p/9393959.html
今日推荐