HTML5高階程式設計之畫素處理及粒子效果

2021-06-20 21:51:53 字數 381 閱讀 4808

html5中的畫素處理,需要用到getimagedata和putimagedata兩個函式,先用getimagedata複製canvas畫布中的畫素資料,然後對獲取的畫素資料進行處理,最後再通過putimagedata將處理完的資料貼上到canvas畫布。我們不妨把中間處理畫素的過程稱作畫素的批處理,由於畫素的複製和貼上是兩個比較費時的過程,為了更高效的對畫素進行處理,我們應該在一次批處理過程中盡可能處理更多的畫素資料,來減少畫素的複製和貼上這兩個操作。

首先,來認識一下lbitmapdata,它通常是用來儲存image物件的,具體用法我就不多說了,大家可以看一下api文件

。這裡我主要介紹一下如何用它來批量處理畫素。

下面是lbitmapdata中的兩個函式

HTML5 高階系列 web Storage

html5 的 web storage 儲存方式有兩種 localstorage 和 sessionstorage。這兩種方式都是通過鍵值對儲存資料,訪問方便,不影響 效能。他們的用法相同,儲存時間不同。localstorage 的資料儲存在本地硬體上,可以永久儲存,可以手動呼叫api清除資料。se...

HTML5 高階系列 web Storage

html5 的 web storage 儲存方式有兩種 localstorage 和 sessionstorage。這兩種方式都是通過鍵值對儲存資料,訪問方便,不影響 效能。他們的用法相同,儲存時間不同。localstorage 的資料儲存在本地硬體上,可以永久儲存,可以手動呼叫api清除資料。se...

HTML5 高階系列 indexedDB 資料庫

乙個 可以有多個 indexeddb 資料庫,但每個資料庫的名稱是唯一的。我們需要通過資料庫名來連線某個具體的資料庫。var request indexeddb.open dbname 1 開啟 dbname 資料庫 request.onerror function e request.onsucc...