7. Web API
登录以发布
  • Web API 56 0 1 发布

    CanvasPattern 接口表示描述一个模板（基于 image, canvas 或 video）的不透明对象，通过 CanvasRenderingContext2D.createPattern() 方法创建。

      CanvasPattern() 继承层次

    Object.prototype 　Function.prototype  　　CanvasPattern

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- CanvasPattern.prototype 继承层次

    Object.prototype 　CanvasPattern.prototype

    属性列表 属性说明-- 方法列表 语法说明-- CanvasPattern实例

    Object.prototype 　CanvasPattern.prototype 　　CanvasPattern 实例

    参考

    相关页面

    Object

    外部链接

    CanvasPattern-MDN
  • Web API 48 0 1 发布

    CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数。

      CanvasRenderingContext2D() 继承层次

    Object.prototype 　Function.prototype  　　CanvasRenderingContext2D

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- CanvasRenderingContext2D.prototype 继承层次

    Object.prototype 　CanvasRenderingContext2D.prototype

    属性列表 属性说明canvas这个环境可以绘制于其上的 Canvas 元素。fillStyle用来填充路径的当前的颜色、模式或渐变。globalAlpha指定在画布上绘制的内容的不透明度。这个值的范围在 0.0（完全透明）和 1.0（完全不透明）之间。默认值为 1.0。globalCompositeOperation指定颜色如何与画布上已有的颜色组合（合成）。lineCap指定线条的末端如何绘制。合法的值是 “butt”、“round” 和 “square”。默认值是 “butt”。lineJoin指定两条线条如何连接。合法的值是 “round”、“bevel” 和 “miter”。默认值是 “miter”。lineWidth指定了画笔（绘制线条）操作的线条宽度。默认值是 1.0，并且这个属性必须大于0。miterLimit当 lineJoin 属性为 “miter” 的时候，这个属性指定了斜连接长度和线条宽度的最大比率。shadowBlur指定羽化阴影的程度。默认值是0。shadowColor把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串，并且可以包含一个 alpha 部分来表示透明度。默认值是 black。shadowOffsetX, shadowOffsetY指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。strokeStyle指定了用于画笔（绘制）路径的颜色、模式和渐变。 方法列表 语法说明arc()用一个中心点和半径，为一个画布的当前子路径添加一条弧线。arcTo()使用目标点和一个半径，为当前的子路径添加一条弧线。beginPath()开始一个画布中的一条新路径（或者子路径的一个集合）。bezierCurveTo()为当前的子路径添加一个三次贝塞尔曲线。clearRect()在一个画布的一个矩形区域中清除掉像素。clip()使用当前路径作为连续绘制操作的剪切区域。closePath()如果当前子路径是打开的，就关闭它。createLinearGradient()返回代表线性颜色渐变的一个 CanvasGradient 对象。createPattern()返回代表贴图图像的一个 CanvasPattern 对象。createRadialGradient()返回代表放射颜色渐变的一个 CanvasGradient 对象。drawImage()绘制一幅图像。fill()使用指定颜色、渐变或模式来绘制或填充当前路径的内部。fillRect()绘制或填充一个矩形。lineTo()为当前的子路径添加一条直线线段。moveTo()设置当前位置并开始一条新的子路径。quadraticCurveTo()为当前路径添加一条贝塞尔曲线。rect()为当前路径添加一条矩形子路径。restore()为画布重置为最近保存的图像状态。rotate()旋转画布。save()保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。scale()根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换。stroke()沿着当前路径绘制或画一条直线。strokeRect()绘制（但不填充）一个矩形。translate()转换画布的用户坐标系统。 CanvasRenderingContext2D实例

    Object.prototype 　CanvasRenderingContext2D.prototype 　　CanvasRenderingContext2D 实例

    参考

    相关页面

    Object

    外部链接

    CanvasRenderingContext2D-MDN
  • Web API 62 0 1 发布

    ImageBitmap 接口表示能够被绘制到 <canvas> 上的位图图像，具有低延迟的特性。运用 createImageBitmap() 工厂方法模式，它可以从多种源中生成。 ImageBitmap 提供了一种异步且高资源利用率的方式来为 WebGL 的渲染准备基础结构。

      ImageBitmap() 继承层次

    Object.prototype 　Function.prototype  　　ImageBitmap

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- ImageBitmap.prototype 继承层次

    Object.prototype 　ImageBitmap.prototype

    属性列表 属性说明height只读,无符号长整型数值，表示 ImageData 的 CSS 像素单位的高度。width只读,无符号长整型数值， 表示 ImageData 的 CSS 像素单位的宽度。 方法列表 语法说明close()释放ImageBitmap所相关联的所有图形资源。 ImageBitmap实例

    Object.prototype 　ImageBitmap.prototype 　　ImageBitmap 实例

    参考

    相关页面

    Object

    外部链接

    ImageBitmap-MDN
  • Web API 57 0 1 发布

    ImageData对象表示的是图形原始数据，包括三个属性：width(图形的宽)、height(图形的高)、data(包含图形每个像素颜色值（红、绿、蓝、alpha通道值的数组)。

     

    Canvas API提供了三个方法操作imageData对象：

    createImageData： CanvasRenderingContext2D.createImageData(sw,sh); CanvasRenderingContext2D.createImageData(imageData); getImageData： CanvasRenderingContext2D.getImageData(in float sx, in float sy, in float sw, in float sh); putImageData： CanvasRenderingContext2D.putImageData(imagedata, dx, dy); CanvasRenderingContext2D.putImageData(imagedata, dx, dy, dx, dy, dw, dh); ImageData() 继承层次

    Object.prototype 　Function.prototype  　　ImageData

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- ImageData.prototype 继承层次

    Object.prototype 　ImageData.prototype

    属性列表 属性说明data只读,Uint8ClampedArray 描述了一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示。height只读,无符号长整型（unsigned long），使用像素描述 ImageData 的实际高度。width只读,无符号长整型（unsigned long），使用像素描述 ImageData 的实际宽度。 方法列表 语法说明-- ImageData实例

    Object.prototype 　ImageData.prototype 　　ImageData 实例

    参考

    相关页面

    Object

    外部链接

    ImageData-MDN
  • Web API 81 0 1 发布

    Canvas 2D API 的接口 Path2D 用来声明路径，此路径稍后会被 CanvasRenderingContext2D 对象使用。

    CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中，允许你在 canvas 中根据需要创建可以保留并重用的路径

      Path2D() 继承层次

    Object.prototype 　Function.prototype  　　Path2D

    构造函数

    Path2D 构造函数。 创建一个新的 Path2D 对象。

    语法 Path2D() 属性列表 属性说明-- 方法列表 语法说明-- Path2D.prototype 继承层次

    Object.prototype 　Path2D.prototype

    属性列表 属性说明-- 方法列表 语法说明addPath()添加一条新路径到对当前路径。closePath()使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点，那么此函数不会做任何操作。moveTo()将一个新的子路径的起始点移动到(x，y)坐标。lineTo()使用直线连接子路径的终点到 x, y 坐标。bezierCurveTo()添加一条三次贝赛尔曲线到当前路径。 该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。quadraticCurveTo()添加一条二次贝赛尔曲线到当前路径。arc()添加一条圆弧路径。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据 anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。arcTo()根据控制点和半径添加一条圆弧路径，使用直线连接前一个点。ellipse()添加一条椭圆路径。椭圆的圆心在（x,y）位置，半径分别是 radiusX 和 radiusY ，按照 anticlockwise （默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束。rect()创建一条矩形路径，矩形的起点位置是 (x, y) ，尺寸为 width 和 height。 Path2D实例

    Object.prototype 　Path2D.prototype 　　Path2D 实例

    参考

    相关页面

    Object

    外部链接

    Path2D-MDN
  • Web API 145 0 1 发布

    在 canvas 中，TextMetrics 接口表示文本的尺寸，通过 CanvasRenderingContext2D.measureText() 方法创建。

      TextMetrics() 继承层次

    Object.prototype 　Function.prototype  　　TextMetrics

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- TextMetrics.prototype 继承层次

    Object.prototype 　TextMetrics.prototype

    属性列表 属性说明width只读,double 类型，使用 CSS 像素计算的内联字符串的宽度。基于当前上下文字体考虑。actualBoundingBoxLeft只读,double 类型，平行于基线，从 CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，使用 CSS 像素计算。actualBoundingBoxRight只读,double 类型，平行于基线，从 CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，使用 CSS 像素计算。fontBoundingBoxAscent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，使用 CSS 像素计算。fontBoundingBoxDescent只读,double 类型，根据从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界顶部的距离，使用 CSS 像素计算。actualBoundingBoxAscent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，使用 CSS 像素计算。actualBoundingBoxDescent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，使用 CSS 像素计算。emHeightAscent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，使用 CSS 像素计算。emHeightDescent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，使用 CSS 像素计算。hangingBaseline只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，使用 CSS 像素计算。alphabeticBaseline只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，使用 CSS 像素计算。ideographicBaseline只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，使用 CSS 像素计算。 方法列表 语法说明-- TextMetrics实例

    Object.prototype 　TextMetrics.prototype 　　TextMetrics 实例

    参考

    相关页面

    Object

    外部链接

    TextMetrics-MDN
  • Web API 90 0 1 发布

    Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ， 允许开发者来自选音频源，对音频添加作用，创建可视化音频，应用空间效果 （如平移），等等。

      Audio() 继承层次

    Object.prototype 　Function.prototype  　　Audio

    构造函数 属性列表 方法列表 Audio.prototype

    Object.prototype 　EventTarget.prototype 　　Node.prototype 　　　Element.prototype 　　　　HTMLElement.prototype 　　　　　HTMLAudioElement.prototype 　　　　　　Audio.prototype

    属性列表 语法说明-- 方法列表 语法说明-- Audio实例

    Object.prototype 　EventTarget.prototype 　　Node.prototype 　　　Element.prototype 　　　　HTMLElement.prototype 　　　　　HTMLAudioElement.prototype 　　　　　　Audio.prototype 　　　　　　　Audio实例

    参考

    相关页面

    Object Function  EventTarget Node Element HTMLElement HTMLAudioElement <audio>元素

    外部链接 

    Audio-MDN
  • Web API 58 0 1 发布

    Image() 继承层次

    Object.prototype 　Function.prototype  　　Image

    构造函数 语法 var image = new Image(200, 300); image.src = 'picture.jpg'; console.log(image); 参数 unsigned long width 无符号长整数的宽unsigned long height 无符号长整数的高 属性列表 方法列表 Image.prototype

    Object.prototype 　EventTarget.prototype 　　Node.prototype 　　　Element.prototype 　　　　HTMLElement.prototype 　　　　　HTMLImageElement.prototype 　　　　　　Image.prototype

    属性列表 语法说明-- 方法列表 语法说明-- Image实例

    Object.prototype 　EventTarget.prototype 　　Node.prototype 　　　Element.prototype 　　　　HTMLElement.prototype 　　　　　HTMLImageElement.prototype 　　　　　　Image.prototype 　　　　　　　Image实例

    参考

    相关页面

    HTMLImageElement <img> 元素

    外部链接 

    Image-MDN
  • Web API 118 0 1 发布

    Blob 对象是包含有只读原始数据的类文件对象。Blob 对象中的数据并不一定得是JavaScript 中的原生形式。File 接口基于 Blob，继承了 Blob 的功能,并且扩展支持用户计算机上的本地文件。

    创建 Blob 对象的方法有几种，可以调用 Blob() 构造函数，还可以使用一个已有Blob对象上的 slice() 方法切出另一个 Blob 对象。想要从用户的文件里获取一个Blob对象，请参考File文档。

      Blob() 继承层次

    Object.prototype 　
        Function.prototype 
    　　Blob

    构造函数

    Blob(blobParts[, options])

    返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

    语法 var b1 = new new Boolean(value) 参数 value 可选的Boolean对象的初始值.。 属性列表 名称语法説明sizeBlob.sizeBlob 对象中所包含数据的大小（字节）。typeBlob.type一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。 方法列表 名称语法説明sliceBlob.slice([start[, end[, contentType]]])返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。 Blob.prototype 属性列表

    无相应成员。

    方法列表

    无相应成员。

    Blob实例 继承层次

    Object.prototype 　Blob.prototype 　　Blob 实例

    Blob构造函数用法举

    Blob() 构造函数 允许用其它对象创建一个 Blob 对象。比如，用字符串构建一个 blob：

    var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); 使用类型数组和 Blob 创建一个 URL var typedArray = GetTheTypedArraySomehow(); // 传入一个合适的MIME类型 var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 // 你可以像使用一个普通URL那样使用它，比如用在img.src上。 var url = URL.createObjectURL(blob); 从 Blob 中提取数据 var reader = new FileReader(); reader.addEventListener("loadend", function() { // reader.result contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob);
  • Web API 97 0 1 发布

    对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

      File() 继承层次

    Object.prototype
     　Function.prototype
      　　Blob
      　　　File

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- File.prototype 继承层次

    Object.prototype  　Blob.prototype  　　File.prototype

    属性列表

    从其父级继承的属性请查阅: Blob。

    属性说明lastModifiedDate只读，jsval类型，当前File对象所引用文件最后修改时间。name只读，当前File对象所引用文件的文件名。size只读，当前File对象所引用文件的文件大小,单位为字节。type只读，当前File对象所引用文件的文件类型(MIME类型)。 方法列表

    从其父级继承的方法请查阅: Blob.

    语法说明-- File实例

    Object.prototype  　Blob.prototype  　　File.prototype 　　　File 实例

    参考

    相关链接

    ObjectBlob

    外部链接

    File-MDN
  • Web API 124 0 1 发布

    使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer对象。

      FileReader() 继承层次

    Object.prototype 　Function.prototype  　　EventTarget  　　　FileReader

    构造函数 语法 new FileReader(); 参数 length  指定数组缓冲区的大小，以字节为单位返回值 一个实例化的拥有特定字节数的ArrayBuffer对象。它的每一个字节的值都是0。 属性列表 属性说明-- 方法列表 语法说明-- FileReader.prototype 继承层次

    Object.prototype  　EventTarget.prototype  　　FileReader.prototype

    属性列表

    从其父级继承的属性请查阅: EventTarget。

    属性说明error只读，在读取文件时发生的错误。readyState表明FileReader对象的当前状态. 值为State constants中的一个. 只读result读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读. 方法列表

    从其父级继承的方法请查阅: EventTarget.

    语法说明abort()中止该读取操作.在返回时,readyState属性的值为DONE.readAsArrayBuffer()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容.readAsBinaryString()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含所读取文件的原始二进制数据.readAsDataURL()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.readAsText()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个字符串以表示所读取的文件内容. FileReader实例

    Object.prototype  　EventTarget.prototype  　　FileReader.prototype 　　　FileReader 实例

    参考

    相关链接

    ObjectEventTarget

    外部链接

    FileReader-MDN
  • Web API 64 0 1 发布

    indexedDB 是一种新的 HTML5 概念, 用于将数据存储在用户的浏览器中。indexedDB 比本地存储更有能力, 并且对于需要存储大量数据的应用程序非常有用。这些应用程序可以更快地运行效率和负载。

      继承层次

    Object.prototype
     　Function.prototype
      　　IDBFactory
      　　　indexedDB

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明 方法列表 语法说明 异步 API

    异步 API 方法调用完后会立即返回，而不会阻塞调用线程。要异步访问数据库，要调用 window 对象 indexedDB 属性的 open() 方法。该方法返回一个 IDBRequest 对象 (IDBOpenDBRequest)；异步操作通过在 IDBRequest 对象上触发事件来和调用程序进行通信。

    异步 API说明IDBFactory提供了对数据库的访问。这是由全局对象 indexedDB 实现的接口，因而也是该 API 的入口。IDBCursor遍历对象存储空间和索引。IDBCursorWithValue遍历对象存储空间和索引并返回游标的当前值。IDBDatabase表示到数据库的连接。只能通过这个连接来拿到一个数据库事务。IDBEnvironment提供了到客户端数据库的访问。它由 window 对象实现。IDBIndex提供了到索引元数据的访问。IDBKeyRange定义键的范围。IDBObjectStore表示一个对象存储空间。IDBOpenDBRequest表示一个打开数据库的请求。IDBRequest提供了到数据库异步请求结果和数据库的访问。这也是在你调用一个异步方法时所得到的。IDBTransaction表示一个事务。你在数据库上创建一个事务，指定它的范围（例如你希望访问哪一个对象存储空间），并确定你希望的访问类型（只读或写入）。IDBVersionChangeEvent表明数据库的版本号已经改变。 indexedDB.prototype 继承层次

    Object.prototype 　Function.prototype  　　IDBFactory.prototype  　　　indexedDB.prototype

    属性列表 方法列表 语法说明add()添加数据get()检索数据remove()删除数据 indexedDB实例

    Object.prototype 　Function.prototype  　　IDBFactory.prototype  　　　indexedDB.prototype 　　　　indexedDB 实例

    参考

    相关页面

    Object

    外部链接

    IndexedDB_API
  • Web API 66 0 1 发布

    Storage是一个简单的客户端数据库, 允许用户以键/值对的形式保存数据。

    它有一个相当简单的 api 来检索/写入到本地存储器中的数据。它可以存储多达10MB 的每个域的数据。与 cookie 不同, 存储的数据不包括在每个 http 请求中。

      继承层次

    Object.prototype
     　Function.prototype
      　　Storage

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明length获取storage中的个数 方法列表 语法说明-- Storage.prototype 继承层次

    Object.prototype 　Storage.prototype

    属性列表 属性说明-- 方法列表 语法说明setItem()将数据存储到storage中，以键和值作为参数。getItem()获取键值key对应的值removewItem()移除键值为key的数据key()获取storage中第n个元素对的键值clear()清除所有数据 Storage实例

    Object.prototype
      　Storage.prototype
      　　window.localStorage 
    　　window. sessionStorage 

    参考

    相关页面

    Object

    外部链接

    Storage-MDN
  • Web API 44 0 1 发布

    消息事件接口，这一章其实是对后续章节的一个总括介绍，因为后续章节，基本上都需要使用本章节所介绍的接口—MessageEvent。简而言之，无论是跨文档通信，通道通信，服务推送还是WebSocket都会用到MessageEvent，触发message事件的执行。

    MessageEvent源码 [Constructor(DOMString type, optional MessageEventInit eventInitDict), Exposed=(Window,Worker)] interface MessageEvent : Event { readonly attribute any data; readonly attribute USVString origin; readonly attribute DOMString lastEventId; readonly attribute MessageEventSource? source; readonly attribute FrozenArray<MessagePort> ports; void initMessageEvent(DOMString type, boolean bubbles, boolean cancelable, any data, USVString origin, DOMString lastEventId, MessageEventSource? source, sequence<MessagePort> ports); }; dictionary MessageEventInit : EventInit { any data = null; USVString origin = ""; DOMString lastEventId = ""; MessageEventSource? source = null; sequence<MessagePort> ports = []; }; typedef (WindowProxy or MessagePort or ServiceWorker) MessageEventSource; 说明 event.data：消息中的返回数据，包含任意字符串的数据，由原始脚本发送event.origin：包含原始文档、域名以及端口的字符串，一般用于跨文档通信和服务推送event.lastEventId：包含当前消息事件唯一标识符的字符串，一般用于服务推送event.source：原始文件窗口的引用，比如WindowProxy对象，一般用于跨文档通信event.ports：包含MessagePort对象发送消息的数组，一般用于跨文档通信和通道通信到 注意

    MessageEvent继承于DOM Event API且属性共享，但是，通信事件没有冒泡而且不能取消，同时也没有默认行为。

  • Web API 75 0 1 发布

    WebSocket() 继承层次

    Object.prototype
     　Function.prototype
      　　EventTarget
     　　　WebSocket

    构造函数 语法 WebSocket WebSocket(in DOMString url, in optional DOMString protocols); WebSocket WebSocket(in DOMString url,in optional DOMString[] protocols); 参数 url 表示要连接的URL。这个URL应该为响应WebSocket的地址。protocols  可选 , 可以是一个单个的协议名字字符串或者包含多个协议名字字符串的数组。这些字符串用来表示子协议，这样做可以让一个服务器实现多种WebSocket子协议（例如你可能希望通过制定不同的协议来处理不同类型的交互）。如果没有制定这个参数，它会默认设为一个空字符串。

    构造器方法可能抛出以下异常：

    SECURITY_ERR 试图连接的端口被屏蔽。 属性列表 属性说明-- 方法列表 语法说明-- WebSocket.prototype 继承层次

    Object.prototype 　EventTarget.prototype 　　WebSocket.prototype

    属性列表 属性说明binaryType一个字符串表示被传输二进制的内容的类型。取值应当是“blob”或者“arraybuffer”。 “blob”表示使用 DOMBlob 对象，而“arraybuffer”表示使用 ArrayBuffer 对象。bufferedAmount只读，调用 send() 方法加入到队列中等待传输，但是还没有发出的字节数。该值会在所有队列数据被发送后重置为 0。而当连接关闭时不会设为0。如果持续调用 send()，这个值会持续增长。extensions服务器选定的扩展。目前这个属性只是一个空字符串，或者是一个包含所有扩展的列表。onclose用于监听连接关闭事件监听器。当 WebSocket 对象的 readyState 状态变为 CLOSED 时会触发该事件。这个监听器会接收一个叫 close 的 CloseEvent对象。onerror当错误发生时用于监听 error 事件的事件监听器。会接受一个名为 error 的 event 对象。onmessage一个用于消息事件的事件监听器，这一事件当有消息到达的时候该事件会触发。这个 Listener 会被传入一个名为“message”的 MessageEvent 对象。onopen一个用于连接打开事件的事件监听器。当 readyState 的值变为 OPEN 的时候会触发该事件。该事件表明这个连接已经准备好接受和发送数据。这个监听器会接受一个名为 “open” 的事件对象。protocol一个表明服务器选定的子协议名字的字符串。这个属性的取值会被取值为构造器传入的 protocols 参数。readyState只读，连接的当前状态。取值是 Ready state constants 之一。url只读，传入构造器的 URL。它必须是一个绝对地址的 URL。 常量列表 常量说明CONNECTING值为0，连接还没开启。OPEN值为1，连接已开启并准备好进行通信。CLOSING值为2，连接正在关闭的过程中。CLOSED值为3，连接已经关闭，或者连接无法建立。 方法列表 语法说明close()关闭 WebSocket 连接或停止正在进行的连接请求。如果连接的状态已经是 closed，这个方法不会有任何效果。send()通过 WebSocket 连接向服务器发送数据。 WebSocket实例

    Object.prototype
     　EventTarget.prototype
     　　WebSocket.prototype
     　　　WebSocket 实例

    参考

    相关页面

    Object

    外部链接

    WebSocket-MDN
  • Web API 66 0 1 发布

    XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

    XMLHttpRequest 是一个 JavaScript 对象，它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。 而且除了HTTP ,它还支持file 和 ftp 协议.

      XMLHttpRequest() 继承层次

    Object.prototype
     　Function.prototype
      　　EventTarget
      　　　XMLHttpRequestEventTarget
      　　　　XMLHttpRequest

    构造函数 语法 new XMLHttpRequest(); 属性列表 属性说明-- 方法列表 语法说明-- XMLHttpRequest.prototype 继承层次

    Object.prototype  　EventTarget.prototype  　　XMLHttpRequestEventTarget.prototype  　　　XMLHttpRequest.prototype

    属性列表

    从其父级继承的属性请查阅: XMLHttpRequestEventTarget.prototype。

    属性说明onreadystatechange一个JavaScript函数对象，当readyState属性改变时会调用它。回调函数会在user interface线程中调用。readyState请求的状态response响应实体的类型由 responseType 来指定， 可以是 ArrayBuffer， Blob， Document， JavaScript 对象 (即 “json”)， 或者是字符串。如果请求未完成或失败，则该值为 null。responseText此次请求的响应为文本，或是当请求未成功或还未发送时为 null。只读。responseType设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。responseXML本次请求的响应是一个 Document 对象，如果是以下情况则值为 null：请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 responseType 设置为“document”，并且请求为异步的，则响应会被当做 text/html 流来解析。只读.status该请求的响应状态码 (例如, 状态码200 表示一个成功的请求).只读.statusText该请求的响应状态信息,包含一个状态码和原因短语 (例如 “200 OK”). 只读.upload可以在 upload 上添加一个事件监听来跟踪上传过程。withCredentials表明在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或授权的header)。 默认为 false。 方法列表

    从其父级继承的方法请查阅: XMLHttpRequestEventTarget.prototype.

    语法说明abort()如果请求已经被发送,则立刻中止请求.getAllResponseHeaders()返回所有响应头信息(响应头名和值), 如果响应头还没接受,则返回nullgetResponseHeader()返回指定的响应头的值, 如果响应头还没被接受,或该响应头不存在,则返回null.open()初始化一个请求. 该方法用于JavaScript代码中;如果是本地代码, 使用 openRequest()方法代替.overrideMimeType()重写由服务器返回的MIME type。这个可用于, 例如，强制把一个响应流当作“text/xml”来处理和解析,即使服务器没有指明数据是这个类型。注意，这个方法必须在send()之前被调用。send()发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.setRequestHeader()给指定的HTTP请求头赋值.在这之前,你必须确认已经调用 open() 方法打开了一个url. XMLHttpRequest实例

    Object.prototype
      　EventTarget.prototype
      　　XMLHttpRequestEventTarget.prototype
      　　　XMLHttpRequest.prototype
    　　　　XMLHttpRequest 实例

    参考

    相关链接

    ObjectEventTarget

    外部链接

    XMLHttpRequest-MDN
  • Web API 54 0 1 发布

    XMLHttpRequestEventTarget是一个描述事件处理程序的接口，你可以在一个用于处理XMLHttpRequest事件的对象中使用到该事件处理程序。

    XMLHttpRequestEventTarget() 继承层次

    Object.prototype
    　Function.prototype
    　　EventTarget
    　　　XMLHttpRequestEventTarget

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- XMLHttpRequestEventTarget.prototype 继承层次

    Object.prototype  　EventTarget.prototype  　　XMLHttpRequestEventTarget.prototype

    属性列表

    从其父级继承的属性请查阅: EventTarget。

    属性说明onabort当请求失败时调用该方法。onerror当请求发生错误时调用该方法onload当一个HTTP请求正确加载出内容后返回时调用。onloadstart当一个HTTP请求开始加载数据时调用。onprogress间歇调用该方法用来获取请求过程中的信息。ontimeout当时间超时时调用；只有通过设置XMLHttpRequest对象的timeout属性来发生超时时，这种情况才会发生。onloadend当内容加载完成，不管失败与否，都会调用该方法 方法列表

    从其父级继承的方法请查阅: EventTarget.

    语法说明 XMLHttpRequestEventTarget实例

    Object.prototype
      　EventTarget.prototype
      　　XMLHttpRequestEventTarget.prototype
    　　　XMLHttpRequestEventTarget 实例

    参考

    相关链接

    ObjectEventTarget

    外部链接

    XMLHttpRequestEventTarget API-MDN

热门总结

  • Web API 145 0 1 发布

    在 canvas 中，TextMetrics 接口表示文本的尺寸，通过 CanvasRenderingContext2D.measureText() 方法创建。

      TextMetrics() 继承层次

    Object.prototype 　Function.prototype  　　TextMetrics

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- TextMetrics.prototype 继承层次

    Object.prototype 　TextMetrics.prototype

    属性列表 属性说明width只读,double 类型，使用 CSS 像素计算的内联字符串的宽度。基于当前上下文字体考虑。actualBoundingBoxLeft只读,double 类型，平行于基线，从 CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，使用 CSS 像素计算。actualBoundingBoxRight只读,double 类型，平行于基线，从 CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，使用 CSS 像素计算。fontBoundingBoxAscent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，使用 CSS 像素计算。fontBoundingBoxDescent只读,double 类型，根据从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界顶部的距离，使用 CSS 像素计算。actualBoundingBoxAscent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，使用 CSS 像素计算。actualBoundingBoxDescent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，使用 CSS 像素计算。emHeightAscent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，使用 CSS 像素计算。emHeightDescent只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，使用 CSS 像素计算。hangingBaseline只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，使用 CSS 像素计算。alphabeticBaseline只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，使用 CSS 像素计算。ideographicBaseline只读,double 类型，从 CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，使用 CSS 像素计算。 方法列表 语法说明-- TextMetrics实例

    Object.prototype 　TextMetrics.prototype 　　TextMetrics 实例

    参考

    相关页面

    Object

    外部链接

    TextMetrics-MDN
  • Web API 126 0 1 发布

    DOM简介

    DOM(Document Object Model,文档对象模型)将XML/HTML文档构造成一个层次化的节点树,并提供了一系列的应用程序编程接口,以允许程序或脚本动态的访问和修改文档的内容、结构和样式。

    内容结构

    DOM由W3C进行了标准化,W3C DOM标准中立于平台和语言,分为以下3个部分：

    核心DOM：针对结构化文档的标准模型XML DOM： 针对XML文档的标注模型HTML DOM：针对HTML文档的标准模型 标准化历史

    DOM标准化的历史如下:

    规范化前版本  由各个浏览器自行实现,这个阶段的DOM经常被称为DHTML(Dynamic HTML,动态HTML)DOM级别1规范  发布于1998年10月1日,专注于HTML和XML文档模型DOM级别2规范  发布于2000年11月13日,对DOM级别1添加了样式表对象模型和事件处理模型DOM级别3规范  从2004年开始陆续发布,对DOM级别2作了系列扩展 核心DOM

    核心DOM定义了一个通用性的,以节点为基础的结构化文档模型,DOM文档模型中的所有内容都是节点,整个文档是一个文档根节点。

    基本属性

    节点的基本属性如下:

    nodeType  获取节点的类型。例如 1代表元素节点,2代表属性节点,3代表文本节点,通常这三类节点使用的最为普遍.nodeName  获取节点的名称。如果节点是元素节点，则 nodeName属性返回标签名;如果节点是属性节点，则nodeName属性返回属性的名称;其他节点类型,nodeName属性将返回不同节点类型的不同名称。nodeValue  设置或返回节点的值。如果节点是元素节点或文档节点，nodeValue属性值为null;如果节点是属性节点，nodeValue代表属性的值;如果节点是文本节点，nodeValue代表节点的内容;如果节点是注释节点，nodeValue代表注释的内容 节点类型

    核心DOM规范中定义了以下节点类型:

    类型说明Type值子节点Document(文档节点)表示整个文档(DOM树的根节点)9Element(max.one) ProcessingInstruction Comment DocumentTypeElement(元素节点)表示标签元素1Text ProcessingInstruction Comment CDATASection EntityReferenceAttribute(属性节点)表示元素的属性2Text EntityReferenceText(文本节点)表示元素或属性中的文本内容3无CDATASection(CDATA区段节点)表示文档中的 CDATA 区段4无DocumentFragment(文档片段节点)表示轻量级的Document 对象11Text ProcessingInstruction Comment CDATASection EntityReferenceComment(注释节点)表示注释8无

    其他还有几个，但一般不太用到，在此暂不列出。

    节点层次

    节点树中的节点彼此拥有层级关系:父节点(parent),子节点(child)和同胞节点(sibling)等。父节点拥有子节点,同级的子节点被称为同胞节点。 另外一部分节点如元素节点拥有属性节点. DOM规范为节点提供了以下诸多属性,以用于获取节点的层次关联信息。

    属性说明childNodes获取当前节点的所有子节点(※1)firstChild获取当前节点的第一个子节点(※1)lastChild获取当前节点的最后一个子节点(※1)ownerDocument获取该节点的文档根节点，相当与documentparentNode获取当前节点的父节点previousSibling获取当前节点的前一个同级节点nextSibling获取当前节点的后一个同级节点attributes获取当前元素节点的所有属性节点集合(※2)※1 部分类型的节点如文本节点等没有子节点.※2 仅部分类型的节点如元素节点拥有属性 创建节点 方法说明document.write()这个方法可以把任意字符串插入到文档中document.createElement()创建一个元素节点node.appendChild()将新节点追加到子节点列表的末尾document.createTextNode()创建一个文本节点node.insertBefore()将新节点插入在前面node.replaceChild()将新节点替换旧节点node.cloneNode()复制节点node.removeChild()移除节点 HTML DOM

    HTML DOM定义了一个HTML文档的文档对象模型。

    HTML文档首先是一个XML文档,为简单起见,XML DOM部分也包含在HTML DOM里一并说明。

    HTML文档的主要构成元素是各类HTML标签,HTML文档中的标签对应着元素节点。

    元素属性

    HTML元素的属性有attribute与property两个概念，这两个通常都被翻译成属性，但含义完全不一样。

    attribute是HTML标签属性，设计期在文档中直接记述，运行期可以通过Node的接口方法getAttribute(name)和setAttribute(name,value)进行访问。attribute值只存在文字列类型。而property是JS对象属性，运行期象一般的JS对象访问一样直接元素进行操作。property值拥有各自不同的数据类型。

    通常每个attribute都有一个同名的property，property可以看成是attribute的包装器，同时也对attribute值进行必要的类型转换。

    HTML: <input id="input1" type="checkbox" checked= "checked"/> <input id="input2" type="checkbox" checked= "true"/> JavaScript: console.log(document.getElementById("input1").getAttribute("checked")); // checked console.log(document.getElementById("input1").checked); // true console.log(document.getElementById("input2").getAttribute("checked"); // true 元素事件 事件阶段(Event Phases)

    当一个DOM事件被触发的时候，它并不只是在它的起源对象上触发一次，而是会经历以下三个不同的阶段:

    捕获阶段  事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。目标阶段  捕获阶段结束,即当事件到达目标节点后，事件就进入了目标阶段,事件在目标节点上被触发。冒泡阶段  事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，直到到达最外层的根节点。 事件处理

    TODO:待编辑

    事件分类

    TODO:待编辑

    元素样式

    TODO:待编辑

    视口

    TODO:待编辑

  • Web API 124 0 1 发布

    使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象，也可以来自拖放操作生成的 DataTransfer对象。

      FileReader() 继承层次

    Object.prototype 　Function.prototype  　　EventTarget  　　　FileReader

    构造函数 语法 new FileReader(); 参数 length  指定数组缓冲区的大小，以字节为单位返回值 一个实例化的拥有特定字节数的ArrayBuffer对象。它的每一个字节的值都是0。 属性列表 属性说明-- 方法列表 语法说明-- FileReader.prototype 继承层次

    Object.prototype  　EventTarget.prototype  　　FileReader.prototype

    属性列表

    从其父级继承的属性请查阅: EventTarget。

    属性说明error只读，在读取文件时发生的错误。readyState表明FileReader对象的当前状态. 值为State constants中的一个. 只读result读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读. 方法列表

    从其父级继承的方法请查阅: EventTarget.

    语法说明abort()中止该读取操作.在返回时,readyState属性的值为DONE.readAsArrayBuffer()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容.readAsBinaryString()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含所读取文件的原始二进制数据.readAsDataURL()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.readAsText()开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个字符串以表示所读取的文件内容. FileReader实例

    Object.prototype  　EventTarget.prototype  　　FileReader.prototype 　　　FileReader 实例

    参考

    相关链接

    ObjectEventTarget

    外部链接

    FileReader-MDN
  • Web API 118 0 1 发布

    Blob 对象是包含有只读原始数据的类文件对象。Blob 对象中的数据并不一定得是JavaScript 中的原生形式。File 接口基于 Blob，继承了 Blob 的功能,并且扩展支持用户计算机上的本地文件。

    创建 Blob 对象的方法有几种，可以调用 Blob() 构造函数，还可以使用一个已有Blob对象上的 slice() 方法切出另一个 Blob 对象。想要从用户的文件里获取一个Blob对象，请参考File文档。

      Blob() 继承层次

    Object.prototype 　
        Function.prototype 
    　　Blob

    构造函数

    Blob(blobParts[, options])

    返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

    语法 var b1 = new new Boolean(value) 参数 value 可选的Boolean对象的初始值.。 属性列表 名称语法説明sizeBlob.sizeBlob 对象中所包含数据的大小（字节）。typeBlob.type一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。 方法列表 名称语法説明sliceBlob.slice([start[, end[, contentType]]])返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。 Blob.prototype 属性列表

    无相应成员。

    方法列表

    无相应成员。

    Blob实例 继承层次

    Object.prototype 　Blob.prototype 　　Blob 实例

    Blob构造函数用法举

    Blob() 构造函数 允许用其它对象创建一个 Blob 对象。比如，用字符串构建一个 blob：

    var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); 使用类型数组和 Blob 创建一个 URL var typedArray = GetTheTypedArraySomehow(); // 传入一个合适的MIME类型 var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 // 你可以像使用一个普通URL那样使用它，比如用在img.src上。 var url = URL.createObjectURL(blob); 从 Blob 中提取数据 var reader = new FileReader(); reader.addEventListener("loadend", function() { // reader.result contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob);
  • Web API 117 0 1 发布
    概述

    DOM存储(Storage)API是通过sessionStorage对象和localStorage对象来实现的。通过这些对象，WEB应用程序能够把信息存储到客户端，并再以后需要的时候进行获取。

    其中：

    sessionStorage 
    会话存储，其中的数据在页面会话结束时会被自动清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。localStorage 
    本地存储，其中的数据没有过期时间，在页面会话结束时不会被自动清除。

    DOM存储与cookie的相同点：

    提供了把数据保存到本地的能力，页面刷新或者关掉浏览器后，数据依然存在。只能存字符串数据。

    DOM存储与cookie的不同点：

    存储容量大。虽然不同浏览器的标准可能不一样，主流的一般都在5~10M，远超cookie的4k。数据不会自动发送到服务器，与cookie相比，节省带宽，加快响应速度 代码示例浏览器支持检测

    通过以下代码可以事先检测浏览器是否支持本API。

    if(window.Storage) { //支持此API } else { //不支持此API }

    存取数据

    使用本地DOM存储

    var loSt = window.localStorage; loSt['username'] = 'hudao'; loSt.setItem('jobName', 'wrting'); console.log(loSt.length); //2 console.log(loSt.username + ' job is ' + loSt.jobName); //hudao job is wrting loSt['jobName'] = 'singer'; console.log(loSt.username + ' job is ' +loSt.jobName); //hudao job is singer delete loSt['jobName'];

    使用会话DOM存储

    sessionStorage.setItem('company', 'Hudao');

    上面代码表示访问当前域名的会话DOM存储对象，并使用setItem()访问往里面添加一个数据条目。

    //获得填充公司名称的文本输入框 var company = document.getElementByid('company'); //检测是否存在company键值 if(sessionStorage.getItem('company')) { //将文本框中的值设置成sessionStorage中的company键值 company.value = sessionStorage.getItem('company'); } //添加监听文本输入框的change事件 company.addEventListener("change", function(){ //将文本框的值保存到sessionStorage中的company键值 sessionStorage.setItem("company", company.value); }); 捕获存储异常 

    不同的浏览器，分配给本地存储的空间是不一样的,该存储的空间是整个子域共享的。

    如果当本地存储满了，再进行写数据，将会触发error，因此有时需要捕捉调用setItem()时的错误。

    try{ localStorage.setItem('name', 'hudao'); }catch(e){ console.log('It's cant't write!'); } 清空存储

    调用clear()方法将会清空整个域的数据，包括和当前页面共享一个存储空间的其他页面。

    localStorage.clear(); sessionStorage.clear();
  • Web API 106 0 1 发布

    概述

    drawImage方法将所给图片绘制到canvas。

    使用方法 CanvasRenderingContext2D .drawImage(image, dx, dy)； CanvasRenderingContext2D .drawImage(image, dx, dy, dw, dh)； CanvasRenderingContext2D .drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)； 参数说明 image：图形数据，可以是图像数据也可以是img标签。sx：从图形x轴坐标x处截取sy：从图形y轴坐标y处截取sw: 截取图形的宽sh：截取图形的高dx：从目标canvas的x轴x处绘制dy：从目标canvas的y轴y处绘制dw: 绘制的宽dh：绘制的高 代码示例

    在todataurl一节中我们为GridFunny添加了一个toDataURL的方法，将canvas直接转换为图形数据， 本节中的示例，使用这个被转换的数据，并将其重新绘制到另一个canvas中：

    // 为GridFunny添加一个clone方法 GridFunny.prototype.clone = function(options, callback) { if (!this._started) this.start(); var self = this, width = 300, height = 300, destGridW = this._canvasRatio("width", options.width || width) * this.pixelX, destGridH = this._canvasRatio("height", options.height || height) * this.pixelY, _opts = this._extendObject({ type: "image/png", opts: {}, width: width, height: height, sx: this.pixelX, sy: this.pixelY, sw: options.gridNum ? options.gridNum * this.pixelX : this.settings.canvasSize.width - this.pixelX * 2, sh: options.gridNum ? options.gridNum * this.pixelY : this.settings.canvasSize.height - this.pixelY * 2, dx: destGridW, dy: destGridH, dw: (options.width || width) - (destGridW * 2), dh: (options.width || width) - (destGridH * 2) }, options || {}); this.toDataURL(_opts.type, _opts.opts, function(canvas, data) { var image = new Image(); image.src = data; image.onload = function() { var _canvas = self._initCanvas(_opts.width, _opts.height), ctx = _canvas.getContext('2d'); ctx.drawImage(image, _opts.sx, _opts.sy, _opts.sw, _opts.sh, _opts.dx, _opts.dy, _opts.dw, _opts.dh) callback(_canvas); }; })； } // 调用 // 剪切三个格子 grid.clone({ gridNum: 3， width: 300, height: 300 }, function(canvas) { grid.settings.container.appendChild(canvas); }); // 全部复制 grid.clone({ width: 300, height: 300 }, function(canvas) { grid.settings.container.appendChild(canvas); });

    clone参数：

    gridNum：剪切的格子数，没有则为全部width：复制后canvas的宽height：复制和canvas的高(s|d)(x,y,w,h)：默认不传，则根据gridNum自动计算，有传值则根据所传值处理图片

    代码的执行效果如下：

  • Web API 97 0 1 发布

    对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

      File() 继承层次

    Object.prototype
     　Function.prototype
      　　Blob
      　　　File

    构造函数

    程序不能直接调用该构造函数，否则将会产生异常。

    属性列表 属性说明-- 方法列表 语法说明-- File.prototype 继承层次

    Object.prototype  　Blob.prototype  　　File.prototype

    属性列表

    从其父级继承的属性请查阅: Blob。

    属性说明lastModifiedDate只读，jsval类型，当前File对象所引用文件最后修改时间。name只读，当前File对象所引用文件的文件名。size只读，当前File对象所引用文件的文件大小,单位为字节。type只读，当前File对象所引用文件的文件类型(MIME类型)。 方法列表

    从其父级继承的方法请查阅: Blob.

    语法说明-- File实例

    Object.prototype  　Blob.prototype  　　File.prototype 　　　File 实例

    参考

    相关链接

    ObjectBlob

    外部链接

    File-MDN
  • Web API 96 0 1 发布

    背景

    通常，当客户端访问一个网页时，会向Web服务器发送一个HTTP请求，Web服务器接收该请求，并返回响应，客户端在接收到响应后再将信息呈现出来。

    对于那些信息变化不是特别频繁的应用来说，也许不会造成多大的影响，但是对于那些对实时性要求比较高即信息经常变化的应用来说（比如在线游戏，信息推送等），就必须采用某种机制来确保服务器与浏览器间的信息同步。

    在WebSocket规范出来之前，可供选择的机制一般三种：

    轮询（Polling）CometFlash插件 轮询

    这是最早的一种实现实时Web应用的方案，客户端按照一定的时间间隔频繁的向服务器发送请求，来实现服务端与客户端的同步。这种方案十分低效，因为并没有什么机制能确定每次发送的请求都能从服务端获得更新的数据（由于服务器更新数据的延时性，会造成客户端发送很多无用的请求，从而浪费了很多通信资源）。

    comet

    Comet本质上还是轮询，只是对上述轮询的缺点上做了些改进，最大限度的降低无效的网络传输。 Comet又分为长轮询技术和流技术，长轮询技术的实现是，给轮询设置条件（比如设置过期时间），当该条件被触发时再发送请求。流技术通常就是在客户端的页面使用一个隐藏窗口向服务端发出一个长连接请求，服务端响应该请求并不断更新连接状态以保证客户端和服务端的连接不过期，在面对并发量比较大的应用时，采用这一方案会消耗很多服务端的资源。

    Flash 插件

    AdobeFlash通过自己的Socket完成数据交换，JavaScript调用Flash提供的API，来实现数据的实时传输。这种方式比轮询要高效得多，但由于需要使用Flash插件，在一些不支持Flash插件或支持得不好客户端上，仍然不能实现实时需求。

    不管是轮询还是comet，这些技术都不能称之为真正的实时技术，它们只是通过Ajax方式来模拟实时效果，客户端和服务端的每次交互都是一次完整的HTTP协议的传输过程（HTTP头信息作为传输内容），大大增加了应用的信息传输量，而且为了实现这些方案，往往需要构建较为复杂的服务端和客户端的编程实现。总体而言，这些技术是即增加了服务端的负载又增加了编程复杂度。

    针对以上技术的缺陷以及web进一步的高并发和实时性需求的环境下，基于HTML5规范的WebSocket应运而生。

    WebSocket是一个基于TCP协议之上解决客户端和服务端之间双向通信的协议，它能高效的实现实现需求。目前有关实时功能的实现基本上都采用WebSocket来实现。

    实现

    WebSocket的实现分为客户端和服务端两部分，客户端发出WebSocket连接请求，服务端响应，实现类似TCP握手的动作，客户端和服务端可以通过这个连接通道传递消息，这个连接会持续存在直到一方主动关闭连接时为止。

    服务端

    rails 5中引入了一个全新的基于WebSocket的框架—Action Cable，可以很方便的构建实时通知系统。下面简单列一下基础代码，有兴趣的朋友也可以点击后面的参考链接作深入的学习。

    def push_to_client user = User.find(self.user_id) user.following_by_type("User").distinct.pluck("id").each do |uid| ActionCable.server.broadcast "notifications/#{uid}", {id: self.id, notifyType: "createTweet"} end rescue nil end

    扩展链接： https://github.com/rails/actioncable-examples https://www.sitepoint.com/create-a-chat-app-with-rails-5-actioncable-and-devise/

    客户端 // 发布消息 var initWebsocket = function() { var self = this; if (window.UasApp && window.UasApp.cable) { if (!this.notificationChannel) { this.notificationChannel = window.UasApp.cable.subscriptions.create("NotificationsChannel", { connected: function() { console.log("connected ................"); }, received: function(data) { self.trigger("notified", { data: data }); } }); } } }; // 监听消息 var bindNotifications = function() { // 监听websocket发布的消息，构建从关注者过来的内容 var self = this; this.own(runtime.on("notified", function(evt) { var data = evt.data; if (data.notifyType === "createTweet") { self.newTweetIds.push(data.id); self.addToNoti(); } })); };

    要点说明：

    1. 上面的rails代码主要用到了Action Cable模块，目前已整合到rails 5.0版本中，属于rails的一部分，源代码。Action Cable 包含了后台和前端的实现，可以方便的为项目添加基于websocket的通信功能。

    2. 上面的前端代码，主要实现了事件分发的功能，首先定制了action cable提供的received方法，该方法会触发notified事件的执行，然后在各实例DOM中监听notified事件，处理其对应的DOM操作，比如样例中的添加新tweet。

    总结：如果需要在客户端与服务端之间建立极低延迟、近乎即时的连接，则可以使用WebSocket，比如下面的一些实用场景：

    多人在线游戏即时聊天体育赛况直播即时更新社交信息流 参考

    - WebSocket basics - WebSocket API - WebSocket MDN