精彩人生

静下心来，开始接触一下HTML5吧，要不然以后连套页面都不会了。:)在看手册的时候，canvas画布是一项很强大的东西。类似于WEBQQ的动态背景之类的就不说了，咱是菜鸟，从头学。先来看一下canvas中的坐标原点，及正、负坐标的取值那就先试着画一个“

网格在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinatespace）。在前一页的HTML模板里有一个150像素宽， 150像素高的 canvas对象。我在画面上叠加上默认网格，如下图。通常网格的1个单元对应 canvas上的1个像

Canvas相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas元素也可以作

之前的例子里面，我们总是将一个图形画在另一个之上，大多数情况下，这样是不够的。比如说，它这样受制于图形的绘制顺序。不过，我们可以利用globalCompositeOperation属性来改变这些做法。globalCompositeOperation我们不仅可以在已

media 对象提供了大量事件以供选择，audio 对象可使用这些事件。 可利用一组事件来获取可用于在播放音频文件时跟踪进度的状态数据。使用状态事件HTML5 media 对象提供了与 audio 和 video 对象共享的许多方法、属性和事件。 在本主题中，您将了解如何

向网页中添加音频的主要方法是使用 audio 元素。 与大部分新的 HTML5 支持一样，如果用户的浏览器不支持 HTML5audio 元素（旧的浏览器会出现此情况），则 audio 元素允许您使用错误消息或其他播放技术进行回滚。 您可以在 audio标记间放置一条错误消息（如以

色彩 Colors到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle和strokeStyle。Code:fillStyle = color strokeStyle = color

状态的保存和恢复在了解变形之前，我先介绍一下两个你一旦开始绘制复杂图形就必不可少的方法。Code:save() restore()  save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas

在 JavaScript 中播放和暂停音频播放 利用HTML5 audio 元素，您可以向网页中添加音频，而无需使用外部控件或程序。 但是，除非您的网页只需要一个简单的音频播放器，否则，您很可能想对加载的音频文件和它们的播放拥有更多的控制。若要在 JavaScript 中使用

今年三月份因公司不是很忙我们组初次接触了近来比较火的前端技术"HTML5&CSS3",当然我坚信今后它们会更火。他们的新特性深深的吸引了我，以至于让我深深的爱上了他们。随后买了此相关的书籍和在线学习、关注着相关的资讯，近期全求各大网站纷纷推出或是重构了自己的HTML5&CSS3站

一、不要使用section作为div的替代品人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码： My su

让我们从元素的定义开始吧。Code:canvas id="tutorial" width="150" height="150">canvas>  看起来很像，唯一不同就是它不含 src 和 alt属性。它只有两个属性，width 和 hei

File API 是 Mozilla 向 W3C 提出的一个草案，旨在用标准 JavaScript API实现本地文件的读取。File API 将极大地方便 Web 端的文件上传等操作，并有望成为未来的 HTML 5规范的一部分。本文将介绍 File API 的概况，并用两个实例

IE10预览：HTML5初探在过去的几年里我们做了一系列测试来评估主要的移动平台对HTML5应用的支持。直到现在，我们仍旧没有花时间在Windows phones上，主要因为Windows Phone7浏览器太弱根本不值得评估。但是，在上周的Windows Build会议

Impact 是一个 JavaScript 游戏引擎，可以为桌面和手机浏览器开发令人惊叹的 HTML5 游戏。我已经试过了四个其他 JavaScript 游戏引擎，这是我用过的第一个比较有意义的（……）Impact 是市场上第一个真正专业级的 JavaScript 和 H

3、通过Canvas元素实现高级图像操作http://www.brighthub.com/internet/web-development/articles/39509.aspx这篇文章将带领大家学习使用JavaScript和Canvas元素操作图像了几种不同的方

在Canvas元素上实现视差滚动http://www.brighthub.com/internet/web-development/articles/40511.aspx视差滚动是在2D应用中创造立体纵深感的一种技术。这篇文章就来看一看在我们刚刚创建的游戏框架基础上实现视

在Canvas元素上实现视差滚动http://www.brighthub.com/internet/web-development/articles/40511.aspx视差滚动是在2D应用中创造立体纵深感的一种技术。这篇文章就来看一看在我们刚刚创建的游戏框架基础上实现视

原文作者：Matthew Casperson • 编辑：Michele McDonough原文链接: http://www.brighthub.com/internet/web-development/articles/38364.aspx1、认识一下Canvas

4、写一个游戏框架（一）http://www.brighthub.com/internet/web-development/articles/40512.aspx在知道了如何使用画布元素之后，接下来我教大家写一个框架，有了这个框架，我们就可以把它作为基础来创建游戏。在这第

4、写一个游戏框架（二）http://www.brighthub.com/internet/web-development/articles/40512.aspx在这篇文章里，我们继续介绍构成这个基本JavaScript游戏框架的其他必要的类。前一篇文章介绍了Game

译者的话：上周读到这篇关于html5 local storage  的综述性文章觉得十分受益。这篇文章是作者的书HTML5 up & Running的的一个章节，并在线以CC-BY-3.0 License授权。  可以看到dojox.storage 是在HTML5标准成型前整

本文地址：http://www.zhangxinxu.com/wordpress/?p=1952一、引言HTML5虽未来到其鼎盛时期，但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言，应用的HTML5相关特性有：data-自定义属性、p

看过我对JavaScript 性能优化相关的讨论的同学们一定很了解我的一个癖好，就是将一大段的script分解成多个块来执行。通过使用setTimeout()，你可以去改变特定代码执行的时间，从而做到让UI现场执行已经在队列里的任务。比如，你可以通过这样的方式把要执行的代码在50ms后加到UI线程队列里：setTimeout(function(){ //do something}

来源：http://sofish.de/1545话说，还是有不少项目里提供让用户上传东西的。小到一个 wordpress 博客，大到一个文件存储网站。为了更好的用户体验。来学习两个新知识吧。HTML5 文件访问（File Access: FileReader）和拖放（Drag and Drop）。或许下个项目就能用上了。一、起因今天看到 twitter 上有人在分享 Min

来源：http://sofish.de/1449自从翻译了《解读 HTML5：建议、技巧和技术》，就一直没有时间去看 HTML5 相关的东西。上周一次偶然的工作间隙折腾了下 Cache Manifest 。当时直接拿博客当测试环境，虽然应用起来非常简单，但效果却出奇的好。缓存后的速度，简直是惊人的快。像 Yslow 显示，打开一个缓存过的页面，只要0.729秒，比不缓存的差不多快了10

一个标准的XHTML头部代码应该是这样：你能记住吗？你会去死记硬背吗？当然不会！我们只需要机械的复制粘贴即可。再看看一个标准的HTML 5头部是如何的：孰繁孰简，就不用我说了。是的，HTML 5的头部可以如此简单，可以轻易的记住！并且，可以忽略大小写，引号以及

IE下使用excanvas.js之后，动态创建的canvas不支持getContext的解决方法引入excanvas.js以后，在ie下，文档中的canvas就可以用了，但是如果是通过createElement方法创建的就不行了var canvas=document.createElement(”canvas”);if(canvas.getContext){alert(”suppo

Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。data-为前端开发者提供自定义任意属性到html标签中,只要添加的属性名有“data-”前缀。，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性，lightb

该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。document.documentElement.getBoundingClientRect下面这是MSDN的解释：SyntaxoRect = object.get

随着IE 10的即将发布正式版，标志者HTML5的时代已经越来离我们越来越近了，尽管HTML 5的最终标准草案还没最终敲定，但象Chrome,Firefox等浏览器对HTML5的标准已经支持的十分完善了，IE 10的预览版本也声称支持更多的HTML 5特性。在此情况下，无论作为CTO还是一般的前端页面开发者还是网站编程的开发人员，都应该开始给予HTML5相当的重视。而在HTML5中，其中最 令

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态，甚至弹出“脚本运行时间过长“的提示框，如果出现这种情况说明你的脚本已经失控了。一个浏览器至少存在三个线程：js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。JavaScript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来然后加以处理，浏览器无论再什么时候都只有一个JS线程

HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服务器端运行WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。什么是WebSockets？　　WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时WebSockets仍将基

如果你想你的在线分享给人留下深刻的印象，可以考虑用reveal.js。reveal.js是一个制作3D幻灯片效果的插件，它同时应用最新的web技术，来创建漂亮的html演示效果。 reveal.js不依赖其他任何javascript库，是一个独立的javascript插件库。当然，它应用了最新web新技术，所以需要浏览器对CSS 3D变形的支持，这就意味着在IE下看不到漂亮的动画效果。在saf

最新发布的FireFox 10开始支持全屏API。可能很多人暂时不清楚能把这个全屏API用在什么地方，但是已经有人把调用这个功能的JavaScript代码发布出来，并且已经能与HTML5的“video”标签组合应用。在这个jQuery插件的主页上，发布了一个全屏演示和一个应用“video”标签的视频演示。同时提醒除FireFox 10外，仅Chrome 15与Safari 5.1或更高版本的浏

HTML5为Web开发者提供了很多强大的新特性，但是它的一些特定的限制会让它无法和本地应用匹敌。HTML5整合进了很多新的特性，并且有可能提升Web编程模式。和每一个阅读技术资讯的人所知道的一样，没有任何一样东西能像HTML5对互联网造成更多改变。在代码中加入一些HTML5，网站会变得更快更炫。但是HTML5能为那些想要要网络上实现本地应用表现的人做什么可能不在此列了。在享受了HTML5的

手机语音智能控制，电视语音智能，现在你的网页也能识别语音输入了，赶快围观吧，chrome浏览器的标签法只要在你的输入框加入x-webkit-speech 参数即可让你的页面具有语音识别输入功能。html代码：是不是很强大，以后浏览器将无所不能！

一个浏览器至少存在三个线程：js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。JavaScript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来然后加以处理，浏览器无论再什么时候都只有一个JS线程在运行JS程序。GUI 渲染线程负责渲染浏览器界面，当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会

简介： 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新，并通过一个 WebSocket 服务器和客户端的案例来充分展示 WebSocket 的强大和易用。作为下一代的 Web 标准，HTML5 拥有许多引人注目的新特性，如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 Web

如果你是在特意寻找有关HTML5 Geolocation文章，那相信你应该对此有所了解，可能你不太清楚HTML5 Geoloation API的使用或者你想找一个有关HTML5 Geolocation的Demo。我相信你和我一样是一个爱学习的前端工程师，爱关注web前沿技术。下面就让我们一起来看看HTML5 Geoloatio的使用。对于HTML5 Geoloatio的介绍我在此不多说，你可以