HTML5的Web Worker、Web Socket、Web Storage等新API讓很多后臺(tái)的工作可以放到前端來處理，Web Worker解決Javascript單線程和阻塞的問題，相當(dāng)于提供了分布式處理的框架；Web Socket提供了全雙工的長連接通信, 利用它，我們可以實(shí)現(xiàn)微博消息推送、新郵件推送、實(shí)時(shí)游戲和聊天，減少了不必要的數(shù)據(jù)傳輸，提高了信息的實(shí)時(shí)性；Web Storage相當(dāng)于前端的Memcached和數(shù)據(jù)庫。
而HTML5的Canvas是最強(qiáng)大的API之一，可以動(dòng)態(tài)生成圖形、圖像和動(dòng)畫，在HTML5游戲中使用的非常普遍。在下面的例子中，我將展示HTML5 Canvas之美：實(shí)現(xiàn)圖像顏色漸變效果。
以前，我們?cè)诰W(wǎng)站上顯示灰度圖像到彩色圖像的漸變動(dòng)畫有兩種實(shí)現(xiàn)方式：1、基于IE濾鏡的方案，缺點(diǎn)是無法實(shí)現(xiàn)瀏覽器兼容；2、手動(dòng)創(chuàng)建彩色圖像的灰度版本。現(xiàn)在，利用HTML5的Canvas畫布，我們可以高效簡單的實(shí)現(xiàn)此動(dòng)畫效果。
核心的Javascript代碼如下：
// 加載時(shí)就進(jìn)行處理
$(window).load(function(){
var img = $('#color-img');
// 復(fù)制圖像
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);
});
});
// 創(chuàng)建灰度版的圖像
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); // 獲取之前的數(shù)據(jù)
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; // 計(jì)算灰度值
imgPixels.data[i] = avg; // rgb中的r
imgPixels.data[i + 1] = avg; // rgb中的g
imgPixels.data[i + 2] = avg; // rgb中的b
// i + 3是alpha通道，我們現(xiàn)在不需要
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
針對(duì)不支持的舊瀏覽器，我們可以使用Modernizr Javascript庫或者原生Javascript檢測(cè)當(dāng)前瀏覽器是否支持，并提供替代性的解決方案：
if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext
$(document).ready(backupFunc);
}
歡迎訪問更多網(wǎng)站推廣,網(wǎng)絡(luò)營銷,網(wǎng)站優(yōu)化,SEO相關(guān)內(nèi)容
.png)