html5.0之常用标签.pptVIP

HTML5.0之常用标签,一 . 标签 标签定义运行中的进度（进程）。,1.只要设置了border或background-color样式，进度条元素就会变成扁平化风格. 2.伪元素 ：progress-value 已经完成的进度 progress-bar 全部的进度,二 . 标签 包含视频的标准方法。当前，video 元素支持三种视频格式：,Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件,二 . 标签 浏览器支持的视频方法、属性和事件： 方法： 1.play()：播放视频； 2. pause()：暂停视频； 3. load()：重新加载视频； 4. canPlayType(type)：是否能播放某种格式的资源；type的值类似“audio/mp3“,属性： currentSrc;/返回当前资源的URL currentTime= value; /当前播放的位置，赋值可改变位置 src= value; /返回或设置当前资源的URL duration;/当前资源长度 流返回无限 ended;/是否结束 paused;/是否暂停 muted= value; /静音 true:静音状态；false:非静音 volume= value; /音量 值为0-1 playbackRate= value;/当前播放速度，设置后马上改变 error;/null:正常 error.code;/1.用户终止 2.网络错误 3.解码错误 4.URL无效 networkState;/0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源,事件： loadstart/客户端开始请求数据 progress/客户端正在请求数据 suspend/延迟下载 abort/客户端主动终止下载（不是因为错误引起） error/请求数据时遇到错误 stalled/网速失速 play/play()和autoplay开始播放时触发 pause/pause()触发 loadedmetadata/成功获取资源长度 waiting/等待数据，并非错误 playing/开始回放 canplay/可以播放，但中途可能因为加载而暂停 canplaythrough/可以播放，歌曲全部加载完毕 seeking/寻找中 seeked/寻找完毕 timeupdate/播放时间改变 ended/播放结束 ratechange/播放速率改变 durationchange/资源长度改变 volumechange/音量改变,三 . 标签 定义图形，比如图表和其他图像。,1. 标签只是图形容器，您必须使用脚本来绘制图形。 2.canvas的属性width和height必须是非负值，并且无论什么时候重新设置了width或height的值，画布中任何已绘对象都将被清除！ 3.可以通过getContext(contextId)来获得上下文对象(该对象包括了canvse绘图所有的方法和属性) 。contextId可以为“2d“和“3d“ ，当前唯一被强制必须支持的是“2d“，当使用一个canvas元素的getContext(“2d”)方法时，返回的是CanvasRenderingContext2D对象,使用CanvasRenderingContext2D画直线,1.beginPath()与closePath() beginPath方法重设绘图上下文的子路径列表，并清空所有的子路径 closePath方法在绘图上下文如果没有子路径时，什么也不做；否则，它先把最后一个子路径标示为闭合，然后建立一个包含最后子路径的第一个点的子路径，并加入到绘图上下文,2.moveTo(x, y)与lineTo(x, y) moveTo建立新的子路径，并制定其第一个点为(x,y)。 lineTo(x, y)如果绘图上下文没有子路径，则其等同于moveTo(x,y),否则，其建立一条在子路径最后一个点到给定点的直线，并增加(x,y)到子路径中。 可使用lineWidth=value设置线宽,3.fill()与stroke() fill() : 使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径。 stroke() : 方法绘制当前路径的边框。 使用 fill() 路径会自动闭合，但使用 stroke() 不会(可使用closePath()来闭合路径)。,使用CanvasRenderingContext2D画弧线,arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法接受五个参数：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。,注意：arc 方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees。,使用CanvasRenderingContext2D画矩形,fillStyle=value 与 fillRect(x, y, w, h) fillStyle()返回或设置填充形状的当前风格，其值可以是CSS颜色字串，也可以是CanvasGradient或者CanvasPattern对象，非法的值将被忽略。 fillRect()用当前的填充风格填充给定的区域。,/画边框 strokeStyle = value : 返回或设置当前描绘形状的风格。 strokeRect(x, y, w, h) : 使用当前给定的线风格，绘制一个盒子区域。,使用CanvasRenderingContext2D画字,context.fillText(text,x,y,maxWidth) ：绘制填充的文字。text为要显示的文字，显示的位置(x,y),maxWidth为text显示的最大宽度，如果显示的文字宽度大于该值，则进行压缩。 context.strokeText(text,x,y,maxWidth) ：对文字进行描边，不填充内部区域。参数同上 context.font=value ：获得和设置文字,可以参考CSS中对font风格的设置,CanvasRenderingContext2D渐变,渐变(Gradient) 1.createLinearGradient(x0, y0, x1, y1) ：建立一个线性渐变，四个参数，前两个人参数表示起始坐标(x0,y0),后两个参数表示结束坐标(x1,y1)。 2.createRadialGradient(x0, y0, r0, x1, y1, r1) : 建立一个径向渐变。六个参数，前三个参数表示开始的圆，其圆点在(x0,y0),半径为r0，后三个表示结束的圆，参数意义同上 3.addColorStop(offset, color) ：在给定偏移的地方增加一个渐变颜色点(color)，偏移量(offset)取值范围为0-1.0之间,线性渐变,径向渐变,CanvasRenderingContext2D转换,转换(Transformations) context . rotate(angle) ：按给定的弧度旋转,按顺时针旋转；rotate方法旋转的中心始终是canvas的原点，如果要改变它，需要使用translate方法。 context . translate(x, y) ：可以理解为偏移，向x,y方向偏移指定的量,其用来移动Canvas的原点到一个指定的值 context . scale(x, y) ：按给定的缩放倍率缩放，参数为1.0表示不变，比1.0小表示缩小，否则表示放大,sa