教程

目錄：

1. 繪制靜態粒子圖形效果

2. 添加靜態粒子動畫效果

3. 添加粒子碰撞動畫效果

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

基礎要求：

1. 了解基礎HTML標簽，例如canvas標簽

2. 了解Javascript的基礎知識

第一步： 生成靜態粒子圖形

生成靜態粒子圖形，我們將會使用到Canvas的如下相關方法：

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

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

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

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

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

var posX = 30, //定義圓心X坐標

posY = 30, //定義圓心Y坐標

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;

在線演示&調試地址

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

第二步： 生成粒子運行效果

動畫效果原理：

HTML5 畫布動畫生成原理，本質來說實現方式就是每隔固定時間段重新繪制畫布內的圖形，如下是代碼：

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

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

posX = 30,

posY = 30,

particleRadius = 30;

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

setInterval(function{

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

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方法來先將整個背景色重新填充，再使用arc方法重新繪制圓形，來生成移動的效果

在線演示&調試地址

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

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

使用HTML5畫布生成一個粒子碰撞地面效果，并且同時添加相關重力加速度效果。

首先定義粒子x軸和y軸的運動速度及重力加速度，如下：

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

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

gravity = 1; //定義一個重力的參數，即重力加速度

然后，設置粒子運動速度，即每次繪制粒子圓心坐標的變化，如下：

//以下代碼設置運動速度

posX+=speedX;

posY+=speedY;

同時，保證Y軸擁有一個加速度效果，如下：

//添加重力加速度效果

speedY+=gravity;

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

//接下來我們添加地面反彈效果，只需要判斷當粒子運動到近畫布底端的時候，粒子Y軸坐標反向

if(posY > canvas.height - particleRadius){

speedY*=-0.5; //這里設置粒子速度為負值，修改此數值可以修改粒子Y軸運動速度損耗量

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

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

}

在線演示&調試地址

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

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

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

//判斷粒子位于畫布右側可顯示區域外

if(posX > canvas.width - particleRadius){

speedX*=-1;

posX = canvas.width - particleRadius;

}

//判斷粒子位于畫布左側可顯示區域外

if(posX < particleRadius){

speedX*=-1;

posX = particleRadius;

}

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

if(posY < particleRadius){

speedY*=-1;

posY = particleRadius;

}

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

在線演示&調試地址

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

Done！以上就是幾個HTML5實現粒子物理碰撞的例子， 希望大家能夠覺得有用， 有任何問題，請給我留言哈

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

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

接下來燦輝詳細給大家說說這個瀏覽器指紋（browser fingerprint）

瀏覽器指紋追蹤

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

基本指紋

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

2) 高級指紋

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

①、Canvas指紋

說到高級指紋，不得不提Canvas指紋，Canvas（畫布）是HTML5中一種動態繪圖的標簽，可以使用其生成甚至處理高級圖片。2014年9月，ProPublica報道：新型的Canvas指紋追蹤正在被用到“上到白宮，下到YouPorn”等眾多網站，事實上早在2012年已有研究報告[6]分析稱canvas指紋被用于跟蹤用戶。

利用Canvas進行追蹤的一般過程大致如下：

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

②、AudioContext指紋

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

AudioContext指紋原理大致如下：

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

AudioContext指紋基本原理：

主機或瀏覽器硬件或軟件的細微差別，導致音頻信號的處理上的差異，相同器上的同款瀏覽器產生相同的音頻輸出，不同機器或不同瀏覽器產生的音頻輸出會存在差異。

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

https://audiofingerprint.openwpm.com/

還有一些動態檢測，比如運行js，通過flash插件對瀏覽器或者底層操作系統的唯一信息進行訪問。

3) 硬件指紋

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

JavaScript 行為

上面的描述看起來主要是網絡層面上的工作，但其實在瀏覽里的 JavaScript 范疇內，同樣有大量的信息可供采集。

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

當然了，現代瀏覽器為了避免一些敏感的 DOM 屬性泄露，會使用一些安全策略來限制一些屬性的訪問。但對于 fingerprinting 的場景來說，有些安全策略和掩耳盜鈴差不多。

跨瀏覽器指紋

上述指紋都是基于瀏覽器進行的，同一臺電腦的不同瀏覽器具有不同的指紋信息。這樣造成的結果是，當同一用戶使用同一臺電腦的不同瀏覽器時，服務方收集到的瀏覽器指紋信息不同，無法將該用戶進行唯一性識別，進而無法有效分析改用戶的的行為。

近期有學者研究了一種跨瀏覽器的瀏覽器指紋，其依賴于瀏覽器與操作系統和硬件底層進行交互進而分析計算出指紋，這種指紋對于同一臺電腦的不同瀏覽器也是相同的。更多技術細節請參考：

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

3. WebRTC

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

MediaStream：通過MediaStream的API能夠通過設備的攝像頭及麥克風獲得視頻、音頻的同步流。

RTCPeerConnection：RTCPeerConnection是WebRTC用于構建點對點之間穩定、高效的流傳輸的組件。

RTCDataChannel：RTCDataChannel使得瀏覽器之間（點對點）建立一個高吞吐量、低延時的信道，用于傳輸任意數據。

基于WebRTC的實時通訊功能，可以獲取客戶端的IP地址，包括本地內網地址和公網地址。

綜合指紋

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

總結

科技公司通過大數據，會對你進行一個大體的畫像，然后按照你的喜好推送信息。

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

如果你沒有足夠專業的知識或者非常頻繁更換瀏覽器信息的話，幾乎 100% 可以通過瀏覽器指紋定位到一個用戶。

怎么樣，這種瀏覽器指紋追蹤技術夠邪惡吧，映射到現實世界，相當于自動基于這個人身上的一些不可變信息，給每個人賦予一個獨特的特征指紋，基于這個指紋來追蹤一個用戶所有的軌跡。

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