[HTML5]|[HTML5] html5 笔记1 [HTML5]html5笔记1

01-HTML5基础了解HTML5

?HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！例如： video 标签和 audio 及 canvas 标记 ? 新特性： 1. 取消了过时的显示效果标记和... 2. 新表单元素引入 3. 新语义标签的引入 4. canvas标签（图形设计） 5. 本地数据库（本地存储） 6. 一些API ? 好处： 1. 跨平台例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。 ? 缺点： 1. pc端浏览器支持不是特别友好，造成用户体验不佳

新语义标签网页布局结构标签及兼容处理

.... http://www.w3school.com.cn/html/html5_semantic_elements.asp

多媒体标签及属性介绍

? 视频属性：controls 显示控制栏属性：autoplay 自动播放属性：loop设置循环播放 ?音频属性：controls 显示控制栏属性：autoplay 自动播放属性：loop设置循环播放 ? video标签支持的格式http://www.w3school.com.cn/html5/html_5_video.asp ? 多媒体标签在网页中的兼容效果方式

新表单元素及属性智能表单控件

email: 输入合法的邮箱地址 url：输入合法的网址 number：只能输入数字 range：滑块 color：拾色器 date：显示日期 month：显示月份 week ：显示第几周 time：显示时间

表单属性

◆form属性： autocomplete=on | off自动完成 novalidate=true | false是否关闭校验◆ input属性： *autofocus：自动获取焦点 form： list： multiple：实现多选效果 *placeholder ：占位符（提示信息） *required：必填项

HTMl5中的API 获取页面元素及类名操作和自定义属性

? document.querySelector("选择器")；备注：选择器：可以是css中的任意一种选择器通过该选择器只能选中第一个元素。? document.querySelectorAll("选择器"); 备注：与document.querySelector区别： querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素? Dom.classList.add("类名"): 给当前dom元素添加类样式? Dom.classList.remove("类名"); 给当前dom元素移除类样式? classList.contains("类名"); 检测是否包含类样式? classList.toggle("active"); 切换类样式（有就删除，没有就添加）? 自定义属性（小案例分析体验自定义属性）data-自定义属性名备注：在标签中，以data-自定义名称1. 获取自定义属性Dom.dataset返回的是一个对象 Dom.dataset.属性名或者Dom.dataset[属性名]注意：属性名是不包含data-2. 设置自定义属性 Dom.dataset.自定义属性名=值或者Dom.dataset[自定义属性名]=值；

文件读取

?FileReader FileReader接口有3个用来读取文件方法返回结果在result中 readAsBinaryString---将文件读取为二进制编码 readAsText---将文件读取为文本 readAsDataURL---将文件读取为DataURL ?FileReader 提供的事件模型 onabort中断时触发 onerror出错时触发 onload文件读取成功完成时触发 onloadend读取完成触发，无论成功或失败 onloadstart读取开始时触发 onprogress 读取中 ? 分析读取图片小案例

获取网络状态

? 获取当前网络状态 window.navigator.onLine 返回一个布尔值? 网络状态事件 1. window.ononline 2. window.onoffline

获取地理定位

?获取一次当前位置 window.navigator.geolocation.getCurrentPosition(success,error); 1. coords.latitude维度 2. coords.longitude经度?实时获取当前位置 window.navigator.geolocation.watchPosition(success,error); ? 分析地理定位小案例

本地存储

?发展：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以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()描边ctx.beginPath()；开启新的图层演示： strokeStyle="值" 线宽： linewidth="值"备注：不需要带单位线连接方式：lineJoin: round | bevel | miter (默认)线帽（线两端的结束方式）：lineCap: butt(默认值) | round | square 闭合路径： ctx.closePath()

渐变方案

? 线性渐变 var grd=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="值"; 设置填充颜色

非零环绕原则

? 绘制一个如下图形

文章图片

? 非零环绕原则： 1. 任意找一点，越简单越好 2. 以点为圆心，绘制一条射线，越简单越好（相交的边越少越好） 3. 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，如果相加的区域等于0，则不填充。 4. 非零区域填充 ? 非零环绕原则案例：

绘制虚线

原理：设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系例如： [10,10]实线部分10px 空白部分10px例如： [10,5]实线部分10px 空白部分5px例如： [10,5,20]实线部分10px空白5px实线20px空白部分10px 实线5px 空白20px....绘制： ctx.setLineDash(数组); 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(文本的内容,x,y)? 绘制镂空文本 content.strokeText(); ? 设置文字大小： content.font="20px 微软雅黑" 备注：该属性设置文字大小，必须按照cssfont属性的方式设置? 文字水平对齐方式【文字在圆心点位置的对齐方式】 content.textalign="left | right | center"?文字垂直对齐方式 content.textBaseline="top | middle | bottom | alphabetic(默认)"?文字阴影效果 ctx.shadowColor="red"; 设置文字阴影的颜色ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量ctx.shadowBlur=值; 设置文字阴影的模糊度

绘制图片

? //将图片绘制到画布的指定位置 content.drawImage(图片对象,x,y); ? //将图片绘制到指定区域大小的位置x,y指的是矩形区域的位置，width和height指的是矩形区域的大小 content.drawImage(图片对象,x,y,width,height); ? //将图片的指定区域绘制到指定矩形区域内 content.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight); sx,sy 指的是要从图片哪块区域开始绘制，swidth，sheight 是值截取图片区域的大小 dx,dy 是指矩形区域的位置，dwidth,dheight是值矩形区域的大小? 解决图片绘制到某一个区域的按原比例缩放绘制：绘制宽：绘制高==原始宽：原始高

绘制圆弧

? content.arc(x,y,radius,startradian,endradian[,direct]); x,y圆心的坐标radius 半径startradian开始弧度endradian结束弧度direct方向（默认顺时针 false）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) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并没有发生改变translate(x,y) 是将坐标系中的原点位置发生改变

旋转【坐标系旋转】