摘要：
1.概述 WebSocket是一种比HTTP协议更加高效的网络传输协议，它有效地减少了HTTP头中的冗余信息和网络延时，能够提供客户端-服务器和服务器-客户端的双通道实时通信，同时具有很好的安全机制。基于WebSocket的URL通常以WS://...开头，类似于HTTPS，安全的WebSocket连接URL通常以WSS://...开头。要实现WebSocket通信，需要客户端浏览器支持WebSocket，服务器端也必须支持WebSocket。 WebSocket还具有广播功能，当有多个监听者连接时，广播服务器发送的消息都可被接收到。2.浏览器支持检测 function loadD... 阅读全文
摘要：
1.概述 HTML5 Web Worker可以使Javascript程序在后台单线程执行大量耗时的计算任务。Web Worker在执行时不能直接访问DOM。Web Worker也会消耗CPU和系统资源。Web Worker与页面间的通信可以通过Web Worker的方法postMessage和message事件。2.浏览器支持检测 function loadDemo() { if (typeof(Worker) !== "undefined") { document.getElementById("support").innerHTML ... 阅读全文
摘要：
1.概述 Web Storage是一种在客户端存储数据的方法。比起Cookie，Web Storage更加安全，能够存储更多对象，而不仅仅是字符串；Web Storage能够存储更大的数据，而不是像只能够存储几KB数据的Cookie；Web Storage还可以减少数据在客户端与服务器间的转换，减少带宽。 Web Storage的核心是是window对象的两个子对象sessionStorage和localStorage。数据以键值对的形式通过这两个对象存储，这两个对象都实现了storage接口，拥有名称相同的属性和方法，用法也相同。不同之处是二者的存储时间和共享范围。 sessio... 阅读全文
摘要：
1.浏览器支持性检测 if(window.applicationCache) { // this browser supports offline applications } 2.在线、离线的状态检测和事件 // When the page loads, set the status to online or offline function loadDemo() { if (navigator.onLine) { log("Online"); } else { log("Offline"); ... 阅读全文
摘要：
1.概述 HTML5 Form提供了一些新的HTML表单元素，这些表单通过input元素的type属性指定。若浏览器不支持这些新的表单元素，则它们通常会显示为文本框。 新的表单元素也具有一些新的属性和方法。它们可以通过HTML元素的属性进行设置，也可通过编程访问，但两种访问方式的属性和方法的名称在大小写上略有不同。 •placeholder：表单提示文本。 •autocomplete：表单自动完成，这个属性在很多浏览器中早已实现。值可以是on，off或uspecified。 •autofocus：自动获得焦点。 •min和max：指定具有数值值的表单的最小值和最大值。 ... 阅读全文
摘要：
1.navigator.geolocation HTML5中的地理位置相关的主要对象是navigator.geolocation，它有一些方法和属性，检测浏览器对HTML5地理位置的支持性也就是检测该对象。2.getCurrentPosition、watchPosition和clearWatch方法 这是geolocation的两个核心方法。第一个方法只获取地理位置信息，后一个方法以一定时间间隔获取地理位置信息，它们的参数相同，但返回值不同，后者返回一个watchId，将watchId作为参数传递给clearWatch方法可以终止对地理位置信息的请求。 getCurrentPosi... 阅读全文
摘要：
1.防止被iframe if (window != window.top) { window.top.location = location; } 2.允许被信任的网站iframe var framebustTimer; var timeout = 3000; // 3 second framebust timeout if (window != window.top) { framebustTimer = setTimeout( function() { window.top.location = location; }, ti... 阅读全文
摘要：
1.概述 XMLHttpRequest Level 2是对XMLHttpRequest增强，具有cross-origin支持性。2.浏览器支持性检测 if (typeof xhr.withCredentials === undefined) { document.getElementById("support").innerHTML = "Your browser <strong>doesnot</strong> support cross-origin XMLHttpRequest"; } ... 阅读全文
摘要：
1.概述 HTML5 Cross Document Messaging是为了便于在不同源地址的页面间或是页面、浏览器的窗口、tab、iframe等间传递数据和信息。其核心是window.postMessage(data, origin)方法和message事件。 postMessage的第一个参数是要传递的数据，第二个参数是数据的来源（例如一个URL）。message事件处理程序通常会有一个参数e，e有data和origin两个属性。 捕获messge事件的方法如下： window.addEventListener(“message”, messageHandler, true... 阅读全文
摘要：
1.通用函数 load(): Loads the media file and prepares it for playback. Normally does not need to be called unless the element itself is dynamically created. Useful for loading in advance of actual playback. play(): Loads (if necessary) and plays the media file. Plays fromthe ... 阅读全文
摘要：
1.只读属性 duration: The duration of the full media clip, in seconds. If the full duration is not known, NaN is returned. paused: Returns true if the media clip is currently paused. Defaults to true if the clip has not started playing. ended: Returns true if the media clip ha... 阅读全文
摘要：
1.Audio的浏览器支持性 目前，在IE9++中支持mp3格式，在Chrome和fireFox等中支持ogg(oga)格式。大多数浏览器都支持wav格式。2.video的浏览器支持性 目前主要的支持格式是webm格式，IE9需要下载相关插件。 IE9主要支持H264视频解码器和AAC音频解码器的mp4格式。3.简单示例 audio示例： ① <audio controls src="johann_sebastian_bach_air.ogg"> An audio clip from Johann Sebastian Bach. ... 阅读全文
摘要：
☆ canvas.getContext('2d') 不可在convas中直接绘图，必须用该方法获得其二维空间绘图上下文。☆ context.beginPath() 表示开始新的路径绘制。☆ context.isPointInPath(x, y) 判断某个点是否在路径上。在坐标系被转换后该方法不适用。☆ context.moveTo(x,y) 相当于将画笔从画板提起，笔尖离开画板，然后再将笔尖定位在(x,y)坐标处，在这个新的位置开始新的绘制。☆ context.lineTo(x, y) 相当于画笔笔尖不离开画板，画笔笔尖从当前坐标位置移动至(x,y)坐标处，绘制一条线段。☆.. 阅读全文
摘要：
☆ context.lineWidth 设置线宽，值，可以小于1，以像素为单位，单位是隐式的，赋值的时候不能带单位名称。默认值为1，但1在各浏览器中看起来大概为2像素，可能是因为使用了边缘柔化技术（chrome14看起来不是柔化）。值若值<=0则变为默认的1。若值大于0小于1，则浏览器通常会减淡颜色显示，但看仔细看仍是2像素；chrome14在值的范围为(0, 0.25)时显示有问题，大于等0.25显示正常，且等于0.25则看起来是1像素，但有时候1像素的颜色很淡，甚至显示不出来，可以设置略大于1的值（如1.01）来解决此问题；IE9在值的范围为(0, 0.13)显示有问题。若一个形状内 阅读全文
摘要：
说明：本文及文章最后所附相关文章，是我对于书籍《Pro HTML5 Programming》英文版的个人学习总结。一.Using the HTML5 Canvas API1.convas坐标系统 Convas中的坐标系统以convas的左上角为坐标原点，水平坐标从左到右递增，垂直坐标从上到下递增。2.CSS and Canvas 大多数CSS样式可应用于convas。3.让IE9以下版本中支持convas 可以在http://code.google.com/p/explorercanvas下载一个JS库让IE9以下版本支持convas。使用该库的方法如下： <head... 阅读全文