推薦：HTML 5 標簽、屬性、事件及瀏覽器兼容性速查表 附打包下載
HTML 5 可以說是近十年來 Web 標準最巨大的飛躍。和以前的版本不同，HTML 5 并非僅僅用來表示 Web 內容，它的使命是將 Web 帶入一個成熟的應用平臺，在這個平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化

我最近開發(fā)了我的第一個網(wǎng)頁游戲：一個HTML5的視頻智力游戲。開發(fā)的過程很有趣，我喜歡編程，但當實現(xiàn)了游戲邏輯后，我有了一個有趣的想法：為什么不想個辦法把代碼隱藏起來？起初我想到的是一些很簡單的做法，比如禁止上下文菜單，以防右鍵點擊時可以查看頁面源代碼。但這毫無意義，右鍵菜單不能用，人們仍然可以通過鍵盤快捷鍵或菜單欄里的“查看源文件”來觀看源代碼。

一張圖片能隱含千言萬語

這依賴于圖片的體積。但我決定要把源代碼加密存放到一張圖片里。HTML5的畫布(canvas)組件很適合干這種事情，因為它支持針對圖像像素的操作。一個像素由四個值(通道)來表示：紅，綠，藍和alpha通道。它們的值的分布范圍是從0到255。我的Javascript代碼就是一個個的字符，每個字符都有一個ASCII對應值。ASCII值的范圍也是0-255，所以，我想做的是，遍歷畫布上的每個像素，給每個像素設置3個代碼字符的ASCII值作為它的RGB值，你可以通過charCodeAt函數(shù)輕松的取出這些字符。


生成的是一張色彩斑斕、很小的圖片，它就是我的程序代碼看看吧:

解碼的時候，我只需要把這個圖片畫到畫布上，遍歷像素點，取出r,g,b值所代表的字符：


把它們連接成一個大的字符串，這就是你的代碼了——可執(zhí)行的代碼。

這樣就能保護你的源代碼了嗎？

其實不能——一個有經(jīng)驗的(甚至沒有經(jīng)驗的)程序員仍然能夠知道如何去解碼圖片，取出里面的代碼，但我想這是能防止那些懷著不良商業(yè)目的人偷盜你的的代碼的第一步措施——而那些能夠想出如何解碼的程序員(大部分)都不是來剽竊的

這種方法的主要缺陷
這種技術只能應用在支持HTML5畫布(canvas)技術的現(xiàn)代瀏覽器里，IE6、IE8 里肯定是不行的。甚至有些現(xiàn)代的瀏覽器對于圖片的alpha通道的編碼也有支持問題，所以，每個像素點你只能放3個字符——一個100×100大小的圖片可以存放3萬個文本字符。

你還有其它簡單的能防止別人拷貝你的代碼的方法嗎？我們當然可以把字符進行加密，但如何保證你的解密步驟能不被人輕易的破解呢？告訴我你的想法吧！

分享：使用css3 屬性如何豐富圖片樣式(圓角 陰影 漸變)
把圖片作為background-image，添加的樣式瀏覽器可以很好的渲染,我將會介紹如何使用box-shadow, border-radius 和 transition創(chuàng)建不同圖片樣式(圓角 陰影 漸變)等效果