不同設備基于Html5 Canvas的瀏覽器渲染結果比較

摘 要：Html5 Canvas畫布渲染屬性被廣泛的應用于客戶端指紋跟蹤系統中，與其他設備屬性不同的是，Html5 Canvas的渲染結果是用戶無法改變，且非常穩定的。但是H5 Canvas的唯一性如何呢？對于海量數據來說，H5 Canvas的熵表現會如何呢？文中將從H5 Canvas渲染原理，技術實現方式，數據采集結果分析角度，解答這兩個問題。

關鍵詞：H5 Canvas；設備指紋；熵

近年來，進入移動數字時代后，各種各樣的移動設備充斥著我們每天的生活。對于服務提供商來說，客戶端的設備也從之前單純的個人PC，增加了各種各樣的手機、平板、智能手表、智能電視等其他終端。追蹤用戶，記錄用戶的使用習慣，對用戶行為分析已不是什么秘密。Html5 Canvas畫布渲染屬性被廣泛的應用于客戶端指紋跟蹤系統中，與其他設備屬性不同的是，Html5 Canvas的渲染結果是用戶無法改變，且非常穩定的。那么，在不同平臺下，Html5 Canvas在各種瀏覽器下的唯一性表現如何呢？Html5 Canvas是否具有很強的設備區分度？

一、Html5 Canvas原理簡介

Html5 Canvas畫布渲染原理是利用Html5 Canvas的繪畫功能，在網頁上繪制一張圖片，因為Canvas是一種2D的渲染結果，在圖片的渲染過程中，會涉及操作系統對頁面像素的處理，GPU對于顯示效果的渲染，以及不同的瀏覽器對于字體等的渲染疊加。所以，Canvas渲染不再是單純的Html5的結果，而是操作系統、GPU、瀏覽器相互作用疊加的結果。也因此，不同的設備，在不同的操作系統GPU、瀏覽器下，同一段文字，一張圖片展現出來的效果是存在差異的。而且，Html5 Canvas可以非常方便的把一張圖片轉換成64位進制，對其取哈希值后，可以非常方便的比較。

二、Html5 Canvas的技術可行性

Canvas是Html5的一個屬性，canvas在高級瀏覽器中被廣泛的支持。如Chrome，firefox，IE9以上等瀏覽器都支持。

Canvas的優點：Canvas是H5的畫布元素，即一個DOM元素。通過腳本控制邏輯給畫布上增加文字與圖像，而瀏覽器只需要繪制一次形成一幅圖。

只用一個Canvas DOM元素，降低DOM數量與渲染的復雜度，可以將原來CPU密集型變成GPU操作。絕大多數針對Canvas是用硬件GPU加速渲染 ；

GPU的ALU（計算單元）比CPU要多很多，而控制運算（邏輯）則可以用JavaScript在CPU里做，甚至還可以用WebWorker多線程處理CPU密集型的操作，從而達到充分利用硬件資源的能力；

Canvas畫布無論是JavaScriptH5，還是Native都有類似的API。

基于Canvas的特性，一容易獲取，高級瀏覽器都支持，二，用GPU渲染，因為不同設備的GPU不同，渲染的結果也不同，再加上瀏覽器，操作系統的差異，最終Canvas圖片的結果有很大的不同。而且這種渲染結果具有非常高的穩定性，在硬件軟件條件不變情況下同一臺設備，同樣文字在同一個瀏覽器中多次渲染是一樣的。

三、Html5 Canvas在不同瀏覽器中的表現

在Html5 Canvas中顯示： Welcome to Jiaotong University！ I'm font： 18pt Arial！ 字體Arial，18pt，黑色。

JavaScript代碼片段如下：

<！--Text_Arail-->

var canvas=document.getElementById（\"drawing\"）；

var context=canvas.getContext（\"2d\"）；

context.font=\"18pt Arial\"；

context.textBaseline =\"top\"；

context.fillText（\"Welcome to Jiaotong University！ I'm font： 18pt Arial\"，2，2）；

<！--Get Canvas Image base64 data-->

var dataURL = canvas.toDataURL（）；

document.getElementById（\"drawing_base64\"）.innerHTML=dataURL；

這段代碼在不同瀏覽器中會顯示出不同的效果，而且其Hash值也會不一樣。如下結果：

在Firefox瀏覽器中顯示如下：

在IE 8 瀏覽器中效果：

四、海量數據下Html5 Canvas的唯一性

在相同操作系統，相同瀏覽器，同一品牌下的canvas屬性表現出很強的一致性。

在iOS系統中：

在iOS中，通一段文字在不同產品下，如iPod touch、iPad、iPhone中表現出高度的一致性，并且不同iOS版本下，依然體現出驚人一致的渲染結果。見表3

而相比于iOS產品結構比較簡單，Android產品則是遍地開花，那么在各種各樣品牌下，Canvas的渲染結果如何呢？

在Android系統中：

如表4所示，同一段文字，在不同品牌的Android手機，相同類型瀏覽器，渲染出來的Canvas Hash值是一樣的，并且跟操作系統的版本號、瀏覽器版本、屏幕的尺寸大小，并沒有絕對的關系。Canvas屬性，在Android系統中，渲染結果的唯一性也是不高。

在PC Web中：

在PC中，不同瀏覽器，Canvas能表現出一定差異性，這種差異性在相同操作系統的鄰近版本中，表現不明顯，且跟屏幕尺寸關系不大。見表5。

五、海量數據下Html5 Canvas熵

通過計算，在10萬數據集下，一個字符串類型的Html5 Text Canvas 熵為5.37。

六、結論

如果從單一的Html5 Canvas字體渲染結果來看，Html5 Canvas在不同操作系統中的區分度明顯，跟瀏覽器類型有一定關系，但跟屏幕尺寸大小關系不大。單一的Html5 Canvas字體渲染的熵為5.37，并不是很好，不能很好的區分不同的設備。在實際應用中，為了增加Canvas的辨識度，可以考慮添加不同字體類型、多種圖形交叉渲染、增加畫面顏色、曲線的復雜度等，來提升Html5 Canvas的熵。