html5新特性与用法大全css3实现动画的三种方式如何使用css3实现一个类在线直播的队列动画的示例代码使用html5新特性轻松监听任何App自带返回键的示例HTML5新特性之type=file文件上传功能HTML5新特性之语义化标签前端面试必备之html5的新特性CSS3动画和HTML5新特性详解

=================输入验证相关的新属性==================================     

例子查看input验证相关的属性/yz.html                 

5)required :必填项，内容不能为空               

  6）maxlength：指定字符串的最大长度                

7）minlength：指定字符串的最小长度              

   8）max：指定数字的最大值               

  9）min：指定数字的最小值               

  10）pattern：指定输入必须符合的正则表达式  

上述验证属性会影响表单元素对应的js对象的validity属性，validity属性是验证的属性。

(三） video 视频和音频

    1.flash被H5取代体现在哪些方面？                

flash 绘图（AS/FLEX） =>Canvas/SVG                 

flash 动画 => 定时器+Canvas                 

视频和音频播放 => VIDEO/AUDIO                 

flash 客户端存储 => WebStorage     

2.H5新特性 ——视频播放器 （是个行内块元素。可以给宽高）                

H5提供了一个新的标签用于播放视频：

您的浏览器不支持VIDEO播放！

它本身是一个300*150的行内块元素  备注：写多行source是为了兼容各个浏览器。因为浏览器对视频格式支持不统一，有些浏览器例如有些浏览器支持mp4格式，那么它就播放第一个mp4格式的视频，如果它不支持就检查是不是支持下面的ogg视频，如果支持就播放，不支持的话继续向下，下面没有source了，那么就显示“您的浏览器不支持VIDEO播放！”。

VIDEO标签/对象常用的成员：  

成员属性：

autoplay：false， 是否自动播放 默认false  controls：false，是否显示播放控件，默认为false  loop：false ，是否循环播放，默认为false  muted：false，是否静音播放，默认为false  poster：''，在播放第一帧之前显示的海报，可以是图片。默认为空没有 preload：视频预加载策略，可取值： auto：预加载视频的元数据以及缓冲一定时长，绝对不可以在手机端使用  （尺寸/时长。第一帧内容，缓冲时长）（预加载浪费流量） metadata：仅预加载视频的元数据（尺寸/时长，第一帧内容，）没有缓冲时长，适合手机 none：不预加载任何数据

----------------------------------------------------------------- id v2的属性 用法例如：

v2.playbackRate=3;  

currentTime:当前播放的时长 duration:总时长 paused:true,当前视频是否处于暂停状态 true是暂停，false是播放 volume：1 默认值是1，当前音量 playbackRate：1 ，回放速率 大于1表快放，小于1表慢放

id v2的方法：

play（）：播放视频 pause （）：暂停播放  成员事件： onplay：当视频开始播放时触发的事件 onpause：当视频暂停时触发的事件  练习：不使用video自带的controls，自定义播放/暂停按钮  鼠标移出视频区域隐藏按钮；鼠标移入显示按钮 例如：视频音频、canvas/video.html 当暂停就显示广告，播放就隐藏广告

3、H5新特性 ——音频播放器

 属性方法和视频一样，只不过没有海报属性 ***判断复选框是否√选  

 cb.onchange=function(){ this.checked true为选上，false为没选 }

（四）、canvas

每个画布上有且只有一个“画笔”对象 ———称为“绘图上下文”对象——使用该对象进行绘图！  

var ctx = canvas.getContext('2d') //现在只有2d的 得到画布上的画布对象

canvas绘图 ---难点 ！！！  

1）SVG绘图：矢量绘图技术，2000年出现，后纳入H5标准 2）Canvas绘图：位图绘图技术，H5提出的绘图技术 3）WebGL绘图：3D绘图技术，尚未纳入H5标准

canvas绘图技术 canvas：画布，H5实现2D绘图技术  

您的浏览器不支持canvas

 canvas标签在浏览器默认是300*150的inline-block。画布的宽高只能使用HTML/JS属性来赋值，不能使用css样式赋值！  每个画布上有且只有一个“画笔”对象 ———称为“绘图上下文”对象——使用该对象进行绘图！ var ctx = canvas.getContext('2d') //现在只有2d的 得到画布上的画布对象  

1）使用canvas绘制矩形

 绘制矩形

 ctx.lineWidth = 1 描边宽度 ctx.fillStyle='#000' 填充样式颜色 ctx.strokeStyle='#000' 描边样式颜色 ctx.fillRect(x,y,w,h); //填充一个矩形 x ,y坐标 w，h 宽高 ctx.strokeRect(x,y,w,h); //描边一个矩形 ctx.clearRect(x,y,w,h) 清除一个矩形范围内所有的绘图 

2）使用canvas绘制文本  

 一段文字的定位点在其文本基线的起点

 ctx.textBaseline = 'alphabetic' //文本基线 默认值是第三根线 ctx.font="12px sans-serif" //字体大小和样式 ctx.fillText(str,x,y) //填充 ctx.strokeText(str,x,y) //描边一段文本 ctx.measureText(str) //基于当前文字大小字体设置测量文本,返回的对象是{width：x} 

3）使用canvas绘制路径

path:类似于ps中的“钢笔工具”，由多个坐标点组成的任意形状，路径不可见，可用于“描边”、 “填充”，“裁剪”。

 ctx.beginPath() //开始一条新路径 ctx.closePath() //闭合当前路径 ctx.moveTo(x,y) //移动到指定点 ctx.lineTo(x,y) //从当前点到指定点画直线 ctx.arc(cx,cy,r,start,end) ； //绘制圆拱路径 //cx cy 是圆心坐标xy r是半径 ，start 开始角度，end结束角度 

 角度制：360 = 弧度制：2PI  180 = 1PI 例如

 ctx.arc(100,200,30,0,2*Math.PI) ctx.stroke(); //当前路径描边 ctx.fill(); //当前路径填充 ctx.clip();// 使用当前路径进行裁剪 //*********连接处的角*********** ctx.lineJoin='miter' //线的连接处出现尖角 ctx.lineJoin='round' //线的连接处出现圆角 ctx.lineJoin = 'bevel' //线的连接处出现方角 

4）使用canvas绘制图像

canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片，  且等待图片异步加载完成：

 var img = new Images(); img.src='x.png'; console.log(img.width); //0 异步请求图片 img.onload=function(){ console.log(img.width,im
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：html5中去掉input type date默认样式的方法HTML5 input新增type属性color颜色拾取器的实例代码HTML5中input[type='date']自定义样式与日历校验功能的实现代码
                                                                
下一篇：HTML5新控件之日期和时间选择输入的实现代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法