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

分享到: 更多
重庆彩开奖号码官方 赌场限红规则 pk10模拟投注手机版 香港宝马会原创36码特围 中国女篮进入决赛直播 云南快乐十分任三稳赚技巧 北京pk赛车计划软件苹果 11选5计划软件神器 哪有五分快三精准计划软件 山东时时开奖记录 时时彩下一期计算方法 北京pk赛车稳定计划 北京pk赛车基本走势图 北京pk赛车手机版 河北时时中奖比例 时时计划软件免费版自动出号