先看下效果：
desktop.png
在線demo:https://lucienyang.github.io/blur_desktop/
建議使用chrome瀏覽器，其他瀏覽器我沒測過
整個(gè)頁面分為：
- 頂部工具欄（實(shí)現(xiàn)了高斯模糊）
- 桌面區(qū)
- 開始菜單（實(shí)現(xiàn)了高斯模糊）
- 通知區(qū)（實(shí)現(xiàn)了高斯模糊）
- 底部dock（實(shí)現(xiàn)了高斯模糊）
桌面展示
GIF.gif
開始菜單和通知區(qū)展示
GIF3.gif
其實(shí)原理就是把桌面截了個(gè)屏然后再做高斯模糊，覆蓋在原來的的桌面上截取部分作展示，也就其實(shí)是兩層圖片
用到的js庫如下
html2canvas 一個(gè)純前端js工具用來將頁面截取成一個(gè)圖片
StackBlur 使用canvas技術(shù)做高斯模糊的js工具，挺好用
核心代碼
var width = $(window).width();
var height = $(window).height();
html2canvas($('#desktop'), {
onrendered: function(canvas) {
StackBlur.canvasRGB(canvas, 0, 0, width, height, 20);
var canvasUtil = new CanvasUtil();
$("#startMenuImg").html('').append(canvasUtil.convertCanvasToJPEG(canvas,0.8));
$("#startMenu").slideLeftShow(300);
},
width: width,
height: height
});
分為三個(gè)步驟
- 利用html2canvas將一個(gè)層里的所有內(nèi)容轉(zhuǎn)換成canvas對(duì)象
- 利用stackblur工具將canvas對(duì)象做高斯模糊
- 將canvas轉(zhuǎn)換成圖片填充目標(biāo)層中
當(dāng)然，做的這個(gè)東西是建立在對(duì)性能，對(duì)瀏覽器兼容性等等都不考慮的情況下的一個(gè)嘗試，目前在chrome下測試效果完全沒有問題，在IE下好像不太理想，HTML5性能不好
有興趣的盆友，可以去我的github上下載源碼，喜歡的話給個(gè)star~https://github.com/LucienYang/blur_desktop
