文章詳情頁
javascript - 求助canvas繪制半透明的馬賽克？
瀏覽：202日期：2022-11-24 18:24:34
問題描述
我的需求是提供給用戶使用鼠標(biāo)給上傳的證件涂抹馬賽克，我的思路是給canvas綁定鼠標(biāo)事件，沿著用戶的鼠標(biāo)按壓路徑，將一張半透明的png不停的繪制到證件上，現(xiàn)在我不想用半透明的Png疊加，想直接用canvas生成馬賽克，求皇軍帶路！
問題解答
回答1：算法應(yīng)該并不難：
將 canvas 區(qū)域區(qū)分為形如 100x100 的網(wǎng)格
每次鼠標(biāo)事件，判斷鼠標(biāo)位于哪個網(wǎng)格內(nèi)
將該網(wǎng)格直接 fillRect 繪制為網(wǎng)格內(nèi)的平均顏色（網(wǎng)格內(nèi)全部點(diǎn)的 rgb 取平均，或直接取網(wǎng)格內(nèi)某一點(diǎn)顏色）
這就實(shí)現(xiàn)了疊加馬賽克的基本算法。
標(biāo)簽：
JavaScript
相關(guān)文章：
1. 求救一下，用新版的phpstudy，數(shù)據(jù)庫過段時間會消失是什么情況？2. python沒入門，請教一個問題3. 小程序怎么加外鏈，語句怎么寫！求救新手，開文檔沒發(fā)現(xiàn)4. php如何獲取訪問者路由器的mac地址5. html - 爬蟲時出現(xiàn)“DNS lookup failed”，打開網(wǎng)頁卻沒問題，這是什么情況？6. html5 - input type=’file’ 上傳獲取的fileList對象怎么存儲于瀏覽器？7. 求教一個mysql建表分組索引問題8. node.js - 用nodejs 的node-xlsx模塊去讀取excel中的數(shù)據(jù)，可是讀取出來的日期是數(shù)字，請問該如何讀取日期呢？9. javascript - vue-resource中如何設(shè)置全局的timeout？10. javascript - 在 vue里面用import引入js文件，結(jié)果為undefined
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備