HTML5的Web Worker、Web Socket、Web Storage等新API让很多后台的工作可以放到前端来处理，Web Worker解决Javascript单线程和阻塞的问题，相当于提供了分布式处理的框架；Web Socket提供了全双工的长连接通信, 利用它，我们可以实现微博消息推送、新邮件推送、实时游戏和聊天，减少了不必要的数据传输，提高了信息的实时性；Web Storage相当于前端的Memcached和数据库。

　　而HTML5的Canvas是最强大的API之一，可以动态生成图形、图像和动画，在HTML5游戏中使用的非常普遍。在下面的例子中，我将展示HTML5 Canvas之美：实现图像颜色渐变效果。

　　以前，我们在网站上显示灰度图像到彩色图像的渐变动画有两种实现方式：1、基于IE滤镜的方案，缺点是无法实现浏览器兼容；2、手动创建彩色图像的灰度版本。现在，利用HTML5的Canvas画布，我们可以高效简单的实现此动画效果。

　　 将鼠标放在左边的图片上，图片颜色将从灰度渐变到彩色，一切就在眼前鲜活起来。

　　核心的Javascript代码如下：

// 加载时就进行处理  
$(window).load(function(){  
var img = $('#color-img');  
// 复制图像  
img.clone().addClass('gray-img').css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img);  
img.attr('src', grayscale(img.attr('src')));  
// 图像的淡入  
$('#color-img').mouseover(function(){  
$(this).stop().animate({opacity: 1}, 1000);  
})  
// 图像的淡出  
$('.gray-img').mouseout(function(){  
$(this).stop().animate({opacity: 0}, 1000);  
});  
});
// 创建灰度版的图像  
function grayscale(src) {  
// 取得canvas元素及其绘图上下文  
var canvas = document.createElement('canvas');  
var ctx = canvas.getContext('2d');  
var imgObj = new Image();  
imgObj.src = src;  
canvas.width = imgObj.width;  
canvas.height = imgObj.height; 
ctx.drawImage(imgObj, 0, 0); // 绘制一副图像  
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取之前的数据  
for(var x = 0; x < imgPixels.height; x++){  
for(var y = 0; y < imgPixels.width; y++){  
var i = (x * 4) * imgPixels.width + y * 4;  
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 计算灰度值  
imgPixels.data[i] = avg; // rgb中的r  
imgPixels.data[i + 1] = avg; // rgb中的g  
imgPixels.data[i + 2] = avg; // rgb中的b  
// i + 3是alpha通道，我们现在不需要  
}  
}  
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);  
return canvas.toDataURL();  
}  

　　针对不支持的旧浏览器，我们可以使用Modernizr Javascript库或者原生Javascript检测当前浏览器是否支持，并提供替代性的解决方案：

if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext  
$(document).ready(backupFunc);  
}  

　　目前主要浏览器的新版本都提供Canvas标签的支持：

对于HTML5，我认为不仅要了解技术细节，还要从根本上理解HTML5的架构，从更高的层面上理解它的深层次含义，它的设计理念，你会发现它的架构之美，对于个人架构设计能力和境界提升有很大帮助。

　　Web应用程序和移动互联网是大势所趋，IE6终将消亡，Web和浏览器标准终将统一，HTML5就是道之所藏、美之所在，让我们一起迎接和拥抱HTML5的到来！

来源：博客园