html5重力感應(yīng)剖析附源碼

面是測(cè)試html5重力感應(yīng)的demo

http://bbs.qietu.com/html/zhongli/

http://www.qietu.com/html/f2/qqqianbao/

demo2是切圖網(wǎng)為騰訊網(wǎng)提供的web前端技術(shù)支持的項(xiàng)目，采用的就是html5的重力感應(yīng)。

重力感應(yīng)主要用到兩種事件：

1 orientationchange

這個(gè)事件在屏幕發(fā)生翻轉(zhuǎn)時(shí)觸發(fā)

window.orientation可獲得設(shè)備的方向，一共有三個(gè)值0：豎直, 90：右旋, -90：左旋

2 deviceorientation 和 MozOrientation(firefox專用)

deviceorientation事件可獲得三個(gè)值alpha,beta,gamma，分別代表繞Z軸的旋轉(zhuǎn)角度(0~360)，繞X軸的旋轉(zhuǎn)角度(-180~180)，繞Y軸的旋轉(zhuǎn)角度(-90~90)

MozOrientation事件中可獲得三個(gè)值z(mì),x,y，分別代表垂直加速度，左右的傾斜角度，前后的傾斜角度(取值范圍：-1~1)

坐標(biāo)系見下圖

下面是示例游戲用到重力感應(yīng)的代碼：

window.onorientationchange = function(e){
game.hideNavBar(); //屏幕翻轉(zhuǎn)時(shí)隱藏地址欄
if(game.stage) game.stage.updatePosition(); //更新舞臺(tái)位置
};
window.ondeviceorientation = function(e)
{
var ang;
var o = window.orientation; //獲取設(shè)備方向
if(o == 90){
ang = e.beta; //設(shè)備橫向1
}
else if(o == -90){
ang = -e.beta; //設(shè)備橫向2
}
else if(o == 0){
ang = e.gamma; //設(shè)備縱向
}
if(ang > 5)
{
keyState[Q.KEY.RIGHT] = true;
}
else if(ang < -5)
{
keyState[Q.KEY.LEFT] = true;
}
else
{
keyState[Q.KEY.RIGHT] = false;
keyState[Q.KEY.LEFT] = false;
}
}

無附件，源碼面前，了無秘密，作為web前端工程師，我們需要具備查看源碼的能力。

原文：http://bbs.qietu.com/forum.php?mod=viewthread&tid=15036

教程

1. 繪制靜態(tài)粒子圖形效果

2. 添加靜態(tài)粒子動(dòng)畫效果

3. 添加粒子碰撞動(dòng)畫效果

4. 添加粒子四面碰撞效果

基礎(chǔ)要求：

1. 了解基礎(chǔ)HTML標(biāo)簽，例如canvas標(biāo)簽

2. 了解Javascript的基礎(chǔ)知識(shí)

第一步：生成靜態(tài)粒子圖形

生成靜態(tài)粒子圖形，我們將會(huì)使用到Canvas的如下相關(guān)方法：

context.fillRect(x, y, width, height);

context.arc(x, y, r, sAngle, eAngle, counterclockwise);

其中，使用fillRect方法生成了整個(gè)動(dòng)畫場(chǎng)景，布滿了畫布全部區(qū)域，再使用arc方法來生成一個(gè)圓形，arc方法本身用來生成圓弧，但是如果生成一個(gè)360度的圓弧的話，就自然生成了圓形，完整代碼如下：

var canvas = document.getElementById('gbcanvas'),

context = canvas.getContext('2d');

var posX = 30, //定義圓心X坐標(biāo)

posY = 30, //定義圓心Y坐標(biāo)

particleRadius = 30; //定義半徑

context.fillStyle = '#E4E4E4';

context.fillRect(0,0,canvas.width,canvas.height); //生成畫布背景色

context.beginPath;

context.fillStyle = '#dd4814';

context.arc(posX, posY, particleRadius, 0 , Math.PI*2, true);

context.closePath;

context.fill;

在線演示&調(diào)試地址

http://www.igeekbar.com/igclass/code/5392196c-400d-466c-b0cb-647bbc3469cc.htm

第二步：生成粒子運(yùn)行效果

動(dòng)畫效果原理：

HTML5 畫布動(dòng)畫生成原理，本質(zhì)來說實(shí)現(xiàn)方式就是每隔固定時(shí)間段重新繪制畫布內(nèi)的圖形，如下是代碼：

var canvas = document.getElementById('gbcanvas'),

context = canvas.getContext('2d'),

posX = 30,

posY = 30,

particleRadius = 30;

//定義setInterval來隔特定時(shí)間生成粒子，如下

setInterval(function{

//為了能夠生成粒子移動(dòng)效果，我們需要在每次繪制粒子之前清楚界面里的繪圖

context.fillStyle = '#E4E4E4';

context.fillRect(0,0,canvas.width,canvas.height); //使用背景色填充

posX+=2;

posY+=1;

context.arc(posX, posY, particleRadius, 0, Math.PI*2, true);

}, 10);

以上代碼我們使用fillRect方法來先將整個(gè)背景色重新填充，再使用arc方法重新繪制圓形，來生成移動(dòng)的效果

在線演示&調(diào)試地址

http://www.igeekbar.com/igclass/code/d2ff678f-23f1-4cab-9eba-9898d4393017.htm

第三步：生成粒子碰撞效果

使用HTML5畫布生成一個(gè)粒子碰撞地面效果，并且同時(shí)添加相關(guān)重力加速度效果。

首先定義粒子x軸和y軸的運(yùn)動(dòng)速度及重力加速度，如下：

speedX = 10, //定義一個(gè)X軸方向的速度

speedY = 10, //定義一個(gè)Y軸方向的速度

gravity = 1; //定義一個(gè)重力的參數(shù)，即重力加速度

然后，設(shè)置粒子運(yùn)動(dòng)速度，即每次繪制粒子圓心坐標(biāo)的變化，如下：

//以下代碼設(shè)置運(yùn)動(dòng)速度

posX+=speedX;

posY+=speedY;

同時(shí)，保證Y軸擁有一個(gè)加速度效果，如下：

//添加重力加速度效果

speedY+=gravity;

最后，我們添加一個(gè)地面碰撞效果，判斷當(dāng)粒子的中心Y軸低于canvas的高度減去粒子半徑，即粒子部分區(qū)域低于畫布最低端的時(shí)候，重新定義粒子的位置，如下：

//接下來我們添加地面反彈效果，只需要判斷當(dāng)粒子運(yùn)動(dòng)到近畫布底端的時(shí)候，粒子Y軸坐標(biāo)反向

if(posY > canvas.height - particleRadius){

speedY*=-0.5; //這里設(shè)置粒子速度為負(fù)值，修改此數(shù)值可以修改粒子Y軸運(yùn)動(dòng)速度損耗量

speedX*=0.5; //這里設(shè)置粒子X軸速度的損耗量

posY = canvas.height - particleRadius; //這里當(dāng)粒子低于畫布最低端的時(shí)候，設(shè)置保證其不消失

}

在線演示&調(diào)試地址

http://www.igeekbar.com/igclass/code/8a3cfeb7-b052-4bf7-b3b1-8ec4e59584af.htm

第四步：生成四面碰壁粒子效果

上面我們生成了粒子碰撞地面效果，本節(jié)我們添加粒子四面碰壁效果，基本代碼如下：

//判斷粒子位于畫布右側(cè)可顯示區(qū)域外

if(posX > canvas.width - particleRadius){

speedX*=-1;

posX = canvas.width - particleRadius;

}

//判斷粒子位于畫布左側(cè)可顯示區(qū)域外

if(posX < particleRadius){

speedX*=-1;

posX = particleRadius;

}

//最后添加頂端的反彈效果

if(posY < particleRadius){

speedY*=-1;

posY = particleRadius;

}

大家可以看到，代碼基本和碰撞地面效果類似，只不過判斷粒子中心所處的坐標(biāo)位置來修改粒子運(yùn)動(dòng)的方向。

在線演示&調(diào)試地址

http://www.igeekbar.com/igclass/code/87784219-f527-4f52-bfb2-62cd82bbc07d.htm

Done！以上就是幾個(gè)HTML5實(shí)現(xiàn)粒子物理碰撞的例子，希望大家能夠覺得有用，有任何問題，請(qǐng)給我留言哈

前Google標(biāo)榜自己不作惡的企業(yè)價(jià)值觀，但是Google在追蹤用戶，收集用戶信息這件事上面又是臭名昭著，讓燦輝很難再去相信任何一個(gè)商業(yè)巨頭的“不作惡”了。

這里跟大家一起來分享一個(gè)“邪惡”的追蹤用戶的技（shou）術(shù)（duan），為什么說邪惡呢，因?yàn)檫@個(gè)跟蹤技術(shù)就像一塊牛皮糖，即使你不登錄，哪怕你卸載重裝瀏覽器，他可能還能追蹤到你，因?yàn)檫@個(gè)指紋是基于你的設(shè)備的一些硬件信息來生成的，基本上如果你的設(shè)備不更換，大概率可以確保指紋不變，從而持續(xù)追蹤你，而且是跨網(wǎng)站追蹤。

接下來燦輝詳細(xì)給大家說說這個(gè)瀏覽器指紋（browser fingerprint）

瀏覽器指紋追蹤

類似人的外貌和指紋，Web客戶端（這里主要指瀏覽器）也有多種“外貌”信息和“指紋”信息，將這些信息綜合分析計(jì)算后，可對(duì)客戶端進(jìn)行唯一性識(shí)別，進(jìn)而鎖定、追蹤、了解網(wǎng)民行為和隱私數(shù)據(jù)。

基本指紋

基本指紋是任何瀏覽器都具有的特征標(biāo)識(shí)，比如硬件類型（Apple）、操作系統(tǒng)（Mac OS）、用戶代理（User agent）、系統(tǒng)字體、語言、屏幕分辨率、瀏覽器插件 (Flash, Silverlight, Java, etc)、瀏覽器擴(kuò)展、瀏覽器設(shè)置 (Do-Not-Track, etc)、時(shí)區(qū)差（Browser GMT Offset）等眾多信息，這些指紋信息“類似”人類的身高、年齡等，有很大的沖突概率，只能作為輔助識(shí)別。可以在該網(wǎng)址進(jìn)行查看本地瀏覽器的基本特征，https://www.whatismybrowser.com/

2) 高級(jí)指紋

基本指紋就像是人的外貌特征，外貌可以用男女、身高、體重區(qū)分，然而這些特征不能對(duì)某個(gè)人進(jìn)行唯一性標(biāo)識(shí)，僅使用基本指紋也無法對(duì)客戶端進(jìn)行唯一性判定，基于HTML5的諸多高級(jí)指紋對(duì)此提供了新思路。

①、Canvas指紋

說到高級(jí)指紋，不得不提Canvas指紋，Canvas（畫布）是HTML5中一種動(dòng)態(tài)繪圖的標(biāo)簽，可以使用其生成甚至處理高級(jí)圖片。2014年9月，ProPublica報(bào)道：新型的Canvas指紋追蹤正在被用到“上到白宮，下到Y(jié)ouPorn”等眾多網(wǎng)站，事實(shí)上早在2012年已有研究報(bào)告[6]分析稱canvas指紋被用于跟蹤用戶。

利用Canvas進(jìn)行追蹤的一般過程大致如下：

基于Canvas標(biāo)簽繪制特定內(nèi)容的圖片，使用canvas.toDataURL()方法獲得圖片內(nèi)容的base64編碼（對(duì)于PNG格式的圖片，以塊(chunk)劃分，最后一塊是32位CRC校驗(yàn)）作為唯一性標(biāo)識(shí)，如下圖。

②、AudioContext指紋

HTML5提供給JavaScript編程用的Audio API則讓開發(fā)者有能力在代碼中直接操作原始的音頻流數(shù)據(jù)，對(duì)其進(jìn)行任意生成、加工、再造，諸如提高音色，改變音調(diào)，音頻分割等多種操作，甚至可稱為網(wǎng)頁版的Adobe Audition。

AudioContext指紋原理大致如下：

方法一：生成音頻信息流(三角波)，對(duì)其進(jìn)行FFT變換，計(jì)算SHA值作為指紋，音頻輸出到音頻設(shè)備之前進(jìn)行清除，用戶毫無察覺。

AudioContext指紋基本原理：

主機(jī)或?yàn)g覽器硬件或軟件的細(xì)微差別，導(dǎo)致音頻信號(hào)的處理上的差異，相同器上的同款瀏覽器產(chǎn)生相同的音頻輸出，不同機(jī)器或不同瀏覽器產(chǎn)生的音頻輸出會(huì)存在差異。

從上可以看出AudioContext和Canvas指紋原理很類似，都是利用硬件或軟件的差異，前者生成音頻，后者生成圖片，然后計(jì)算得到不同哈希值來作為標(biāo)識(shí)。音頻指紋測(cè)試地址：

https://audiofingerprint.openwpm.com/

還有一些動(dòng)態(tài)檢測(cè)，比如運(yùn)行js，通過flash插件對(duì)瀏覽器或者底層操作系統(tǒng)的唯一信息進(jìn)行訪問。

3) 硬件指紋

硬件指紋主要通過檢測(cè)硬件模塊獲取信息，作為對(duì)基于軟件的指紋的補(bǔ)充，主要的硬件模塊有：GPU’s clock frequency、Camera、Speakers/Microphone、Motion sensors、GPS、Battery等。

JavaScript 行為

上面的描述看起來主要是網(wǎng)絡(luò)層面上的工作，但其實(shí)在瀏覽里的 JavaScript 范疇內(nèi)，同樣有大量的信息可供采集。

要想編程控制 Web 頁面的 UI 與行為，我們必須使用 JavaScript 來操作 DOM。而稍有經(jīng)驗(yàn)的前端同學(xué)們都知道，DOM 是掛載了非常多屬性而非常沉重的。這也就意味著，DOM 中存儲(chǔ)了大量關(guān)于瀏覽器的敏感信息：User-Agent、系統(tǒng)架構(gòu)、系統(tǒng)語言、本地時(shí)間、時(shí)區(qū)、屏幕分辨率……而對(duì)于 HTML5 中新加入的形如電量、加速度計(jì)、信息、Timing 等特性的 API，不要說檢測(cè)它們的具體值是多少，光是檢測(cè)這些 API 的存在性，信息量就非常大了。而對(duì)這些屬性的檢測(cè)難度有多低呢？我們只需要在 JavaScript 中訪問 navigator.xxx 屬性，就可以輕易地獲得一個(gè)瀏覽器的「身高、體重、血型、星座……」了。

當(dāng)然了，現(xiàn)代瀏覽器為了避免一些敏感的 DOM 屬性泄露，會(huì)使用一些安全策略來限制一些屬性的訪問。但對(duì)于 fingerprinting 的場(chǎng)景來說，有些安全策略和掩耳盜鈴差不多。

跨瀏覽器指紋

上述指紋都是基于瀏覽器進(jìn)行的，同一臺(tái)電腦的不同瀏覽器具有不同的指紋信息。這樣造成的結(jié)果是，當(dāng)同一用戶使用同一臺(tái)電腦的不同瀏覽器時(shí)，服務(wù)方收集到的瀏覽器指紋信息不同，無法將該用戶進(jìn)行唯一性識(shí)別，進(jìn)而無法有效分析改用戶的的行為。

近期有學(xué)者研究了一種跨瀏覽器的瀏覽器指紋，其依賴于瀏覽器與操作系統(tǒng)和硬件底層進(jìn)行交互進(jìn)而分析計(jì)算出指紋，這種指紋對(duì)于同一臺(tái)電腦的不同瀏覽器也是相同的。更多技術(shù)細(xì)節(jié)請(qǐng)參考：

http://yinzhicao.org/TrackingFree/crossbrowsertracking_NDSS17.pdf

3. WebRTC

WebRTC（網(wǎng)頁實(shí)時(shí)通信，Web Real Time Communication），是一個(gè)開源項(xiàng)目，旨在使得瀏覽器能為實(shí)時(shí)通信（RTC）提供簡(jiǎn)單的JavaScript接口，說的簡(jiǎn)單明了一點(diǎn)就是讓瀏覽器提供JS的即時(shí)通信接口，讓瀏覽器實(shí)時(shí)獲取和交換視頻、音頻和數(shù)據(jù)。WebRTC實(shí)現(xiàn)了三個(gè)API，分別是:

MediaStream：通過MediaStream的API能夠通過設(shè)備的攝像頭及麥克風(fēng)獲得視頻、音頻的同步流。

RTCPeerConnection：RTCPeerConnection是WebRTC用于構(gòu)建點(diǎn)對(duì)點(diǎn)之間穩(wěn)定、高效的流傳輸?shù)慕M件。

RTCDataChannel：RTCDataChannel使得瀏覽器之間（點(diǎn)對(duì)點(diǎn)）建立一個(gè)高吞吐量、低延時(shí)的信道，用于傳輸任意數(shù)據(jù)。

基于WebRTC的實(shí)時(shí)通訊功能，可以獲取客戶端的IP地址，包括本地內(nèi)網(wǎng)地址和公網(wǎng)地址。

綜合指紋

Web世界的指紋碰撞不可避免，最終將上述所有的基本指紋和多種高級(jí)指紋綜合利用，進(jìn)行分析、計(jì)算哈希值作為綜合指紋，可以大大降低碰撞率，極大提高客戶端唯一性識(shí)別的準(zhǔn)確性。測(cè)試地址：https://panopticlick.eff.org/ 以及：https://amiunique.org/fp

總結(jié)

科技公司通過大數(shù)據(jù)，會(huì)對(duì)你進(jìn)行一個(gè)大體的畫像，然后按照你的喜好推送信息。

比如一些精準(zhǔn)的廣告，刺激你荷爾蒙的小視頻等。
就拿你在玩的抖音來說，你其實(shí)可以匿名使用，但是你愛抖胸妹子的喜好，不會(huì)因?yàn)橹匮b抖音而消失，它已熟知了你的癖好。
這些收集你瀏覽器信息的動(dòng)作，默默的在后臺(tái)發(fā)生，用戶根本毫無覺察。
你的每一次點(diǎn)擊，都無情的出賣了你，這些信息會(huì)被綜合分析，相關(guān)網(wǎng)站和部門，能夠?qū)δ氵M(jìn)行唯一性識(shí)別，進(jìn)而鎖定、追蹤。
你雖然沒有注冊(cè)賬號(hào)，平臺(tái)卻為你分配了身份。
這是識(shí)別方式，用于識(shí)別你這個(gè)個(gè)體，而收集的內(nèi)容，可能更讓人瞠目結(jié)舌，不要覺得垃圾數(shù)據(jù)多，存不下，行為數(shù)據(jù)比那些廉價(jià)的磁盤，值錢的多。
包括你的每一次點(diǎn)擊，停留的時(shí)長(zhǎng)，閱讀、觀看的位置，都在全方位的展示你的個(gè)體。
設(shè)備、IP、位置、操作習(xí)慣，都在不同的角度繪制你的指紋，讓你在匿名的互聯(lián)網(wǎng)上，無處可藏。

如果你沒有足夠?qū)I(yè)的知識(shí)或者非常頻繁更換瀏覽器信息的話，幾乎 100% 可以通過瀏覽器指紋定位到一個(gè)用戶。

怎么樣，這種瀏覽器指紋追蹤技術(shù)夠邪惡吧，映射到現(xiàn)實(shí)世界，相當(dāng)于自動(dòng)基于這個(gè)人身上的一些不可變信息，給每個(gè)人賦予一個(gè)獨(dú)特的特征指紋，基于這個(gè)指紋來追蹤一個(gè)用戶所有的軌跡。

當(dāng)然對(duì)付這種邪惡的技術(shù)，我們也不是束手就擒，在搞明白了它的追蹤原理之后，我們就有一些技巧和隱私保護(hù)神器來讓這些瀏覽器指紋追蹤失效，接下來的后續(xù)文章里面，燦輝再給大家介紹一些簡(jiǎn)單易行的隱私保護(hù)方法，請(qǐng)關(guān)注我的帳號(hào)，如果文章寫得好，不妨點(diǎn)贊、轉(zhuǎn)發(fā)、評(píng)論三連，在此謝謝。

在線咨詢

上一篇：HTML網(wǎng)頁中的圖形是如何對(duì)齊的？有什么方法可以使它們對(duì)齊？
下一篇：css隱藏內(nèi)容樣式方法（自適應(yīng)頁面常用）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

html5重力感應(yīng)剖析附源碼

瀏覽器指紋追蹤

基本指紋

2) 高級(jí)指紋

3) 硬件指紋

JavaScript 行為

跨瀏覽器指紋

3. WebRTC

綜合指紋

總結(jié)

您的項(xiàng)目需求