01-HTML5基础了解HTML5?HTML5是上一代HTML的新迭代语言。设计HTML5的主要目的是支持移动设备上的多媒体！！！例如：video标签和audio和canvas标签?新特性：1.取消陈旧的显示效果标签和
...2.新的表单元素引入3.新的语义标签介绍4.Canvas标签（平面设计）5.本地数据库（本地存储）6.一些API?好处：1.跨平台例如：比如你开发一个HTML5游戏，可以很方便的移植到UCHTML5的开放平台，Opera的游戏中心，Facebook的应用平台，甚至可以通过打包技术发布到AppStore或者GooglePlay，所以它的跨平台性很强，这也是大多数人对HTML5感兴趣的主要原因.?缺点：1.PC端浏览器支持不是特别友好，导致用户体验差。新增语义标签、网页布局结构标签及兼容处理
....http://www.w3school.com.cn/html/html5_semantic_elements.asp多媒体标签及属性介绍?
视频属性：controls显示控制条属性：autoplay自动播放属性：loop设置循环播放?
音频属性：controls显示控制条属性：autoplay自动播放属性：loop设置循环播放?视频标签支持的格式http://www.w3school.com.cn/html5/html_5_video.asp?网页中多媒体标签的兼容效果
新的表单元素和属性智能表单控件
email:输入合法的电子邮件地址url:Enter合法的网站号码：只能输入数字range:slidercolor:colorpickerdate:displaydatemonth：显示月份week：显示星期time：显示时间表单属性◆表单属性：autocom完全=开|关闭自动完成novalidate=true|false是否关闭验证◆input属性：*autofocus：自动获取焦点form：list：12312123121231212312多个：实现多选效果*placeholder：占位符（提示信息）*required：必填作业：◆自己解决所需的自定义提示信息◆预览和复习留下的问题：◆如何修改表单控件中的默认提示信息1.表单validation触发oninvalid事件2.通过HTMl5中的setCustomValidity方法API设置修改内容获取页面元素和类名操作及自定义属性?document.querySelector("selector");备注：Selector：可以是css中的任意选择器。通过这个选择器只能选择第一个元素?document.querySelectorAll("selector");备注：与document.querySelector的区别：querySelectorAll可以选择所有匹配的元素选择器规则的元素，以列表形式返回。querySelector只返回单个元素?Dom.classList.add("classname"):为当前dom元素添加class样式?Dom.classList.remove("classname");从当前dom元素中移除class样式?classList.contains("classname");检测是否包含类样式?classList.toggle("active");切换类样式（有则删除，没有则添加）?自定义属性（小案例分析经验自定义属性）data-自定义属性名备注：在label中，使用data-自定义名称1.获取自定义属性dom.dataset并返回一个对象Dom.dataset.attributenameorDom.dataset[attributename]注：attributename不包含data-2.设置自定义属性Dom.dataset.Customattributename=valueorDom.dataset[customattributename]=价值；文件读取?FileReaderFileReader接口有3个读取文件的方法ReturntheresultinresultreadAsBinaryString---读取文件为二进制代码readAsText---读取文件为文本readAsDataURL---读取文件为DataURL?事件模型FileReader提供的onabort发生错误时触发onabortonload文件读取成功完成时触发onloadend读取完成时触发，不管成功与否onloadstart读取开始时触发onprogress阅读?读图小案例分析获取网络状态?获取当前网络状态window.navigator.onLine返回一个布尔值?网络状态事件1.window.ononline2.window.onoffline获取geolocation?只能获取一次当前位置window.navigator.geolocation.getCurrentPosition(success,error);1.coords.latitude维度2.coords.longitudelongitude?实时获取当前位置window.navigator.geolocation.watchPosition(success,error);?地理定位分析小案例：1h07m本地存储?发展历程：随着互联网的飞速发展，基于web的应用越来越普遍，同时也越来越复杂。为了满足各种需求，往往会在本地存储大量数据。传统上我们使用document.cookie来存储，但是由于它的存储大小只有4k左右，而且解析起来也相当复杂，给开发带来了很多不便。HTML5规范提出了一种解决方案，使用sessionStorage和localStorage来存储数据?localStorage：1.永久有效2.多窗口共享3.容量约20M◆window.localStorage.setItem(key,value)设置存储内容◆window.localStorage.getItem(key)获取内容◆window。localStorage.removeItem(key)删除内容◆window.localStorage.clear()清除内容?sessionStorage：1.生命周期是关闭当前浏览器窗口2.可以在同一个窗口访问3.数据大小5M左右◆window.sessionStorage.setItem(key,value)◆window.sessionStorage.getItem(key)◆window.sessionStorage.removeItem(key)◆window.sessionStorage.clear()操作多媒体http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp作业：完成一个在线音乐播放器或视频播放器Canvas画布配置代码段绘图工具?canvas画布介绍?设置画布大小：使用属性方法设置?解决画布重绘问题1.设置描边2.打开新图层绘制方法ctx.moveTo(x,y)落笔ctx.lineTo(x,y)连接线ctx.stroke()strokestrokectx.beginPath();打开新图层演示：strokeStyle="value"线宽：linewidth="value"注意：不需要用单位线连接：lineJoin:round|斜角|miter(default)linecap(线的两端结束的方式):lineCap:butt(defaultvalue)|圆形|方形闭合路径：ctx.Position绘制一个宽为200，高为150的矩形2.准备一张600*400的画布，将画布分成三等份，绘制正方形直角三角形，梯形渐变方案?线性渐变vargrd=ctx.createLinearGradient(x0,y0,x1,y1);x0-->渐变开始的x坐标y0-->渐变开始的y坐标x1-->渐变结束的x坐标y1-->渐变结束的y坐标grd.addColorStop(0,"black");设置渐变的起始颜色grd.addColorStop(0.1,"yellow");设置渐变的中间色grd.addColorStop(1,"red");设置渐变的结束颜色ctx.strokeStyle=grd;ctx.stroke();备注：addColorStop(offse,color)中渐变的起始位置和结束位置；都在0-1之间，0表示开始，1表示结束。中间可以设置任意小数?径向渐变ctx.createradialGradient(x0,y0,r0,x1,y1,r1);(x0,y0):渐变起始圆的x,y坐标r0:起始圆的半径(x1,y1):渐变结束圆的x,y坐标r1:渐变的半径结束圆填充效果ctx.fill();设置填充效果ctx.fillstyle="value";设置填充色为非零环绕原则?画图如下?非零环绕原则：1.找任意一个点，越简单越好2.以该点为中心画一条射线，越简单越好（相交的边越少越好）3、以射线为半径顺时针旋转，相交方向相同的边记为+1，相反方向记为-1。如果添加的区域等于0，则不会填充。4.非零区域填充?非零环绕原理案例：画虚线原理：设置虚线其实就是设置实线和空白部分的直线距离，用数组来描述关系。例如：[10,10]实线部分10px，空白部分10px例如：[10,5]实线10px空白5px示例：[10,5,20]实线10px空白5px实线20px空白10px实线5px空白20px...Draw:ctx.setLineDash(Array);ctx.stroke();示例：ctx.moveTo(100,100);ctx.lineTo(300,100);ctx.setLineDash([2,4]);ctx.stroke();注意：如果要将虚线变为实线，只需将数组更改为空数组即可。绘制动画效果?绘制描边矩形：content.strokeRect(x,y,width,height)?绘制填充矩形：content.fillRect(x,y,width,height)?清除：content.clearRect(x,y,width,height)?实现动画效果：1.先清屏2.绘制图形3.过程变量绘制文字?绘制填充文字content.fillText(textcontent,x,y)?绘制空心文字content.strokeText();?设置文字大小：content.font="20pxMicrosoftYahei"备注：该属性设置文字大小，必须按照cssfont属性设置?文字水平对齐【文字在圆心的对齐方式]content.textalign="left|right|center"?文字垂直对齐content.textBaseline="top|middle|bottom|alphabetic(default)"?文字阴影效果ctx.shadowColor="red";设置文字阴影颜色ctx.ShadowOffsetX=value;设置文字阴影的水平偏移量ctx.shadowOffsetY=value;设置文字阴影的垂直偏移量ctx.shadowBlur=value;设置文字阴影的模糊Drawapicture?//将图片绘制到画布内容的指定位置。drawImage(图片对象,x,y);?//绘制图片到指定区域大小的位置x,y指的是矩形区域的位置，width和height指的是矩形区域的大小content.drawImage(pictureobject,x,y,width,高度);?//将图片的指定区域绘制到指定的矩形区域中content.drawImage(pictureobject,sx,sy,width,sheight,dx,dy,dwidth,dheight);块区域开始绘制，width和height是取值来获取图像区域的大小dx，dy是矩形区域的位置，dwidth和dheight是矩形区域大小的值?解决绘制的图片按原比例缩放到一定区域的问题：DrawWidth:drawheight==originalwidth:originalheightdrawarc?content.arc(x,y,radius,startradian,endradian[,direct]);圆心的x,y坐标radiusradiusstartradianstartradianendradianendradian直接方向(默认clockwisefalse)true表示逆时针?0度角在哪里？以圆心为圆心，向右的角度为0，顺时针为正，逆时针为负?注意：角度与弧度的关系：角度：弧度=180：pi特殊值0度=0弧度30度=π/6（180度的六分之一）45度=π/460度=π/390度=π/2180度=π360度=2π圆：公式：x=ox+r*cos(弧度)y=oy+r*sin(弧度)ox：圆心的横坐标oy：圆心的垂直坐标r：圆的半径平移【坐标系圆点的平移】ctx.translate(x,y);特点：可以通过该方法重新设置原点的位置注意：1.translate(x,y)不能设置值2.与moveTo(x,y)的区别：moveTo(x,y)指的是改变位置画笔落笔点，但坐标系中原点位置没有改变stretchctx.scale(x,y)备注：沿x轴和y轴缩放x和y为倍数例如：0.51作业做一个在线播放器（视频，音乐）练习Canvas中的apiH5中的API很熟悉
