HTML5开发基础之实用性

    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的到来!


来源:博客园

上一篇: 6种编写HTML和CSS的最有效的方法

下一篇: 当设计师遭遇HTML5

分享到: 更多