文章詳情頁(yè)
javascript - 求助canvas繪制半透明的馬賽克？
瀏覽：225日期：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)位于哪個(gè)網(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. javascript - 如何在NW.JS中使用Node自動(dòng)重啟進(jìn)程？2. javascript - 為什么會(huì)打印兩次啊？3. gulp-ruby-sass編譯出來的文件有錯(cuò)4. dockerfile - docker-compose啟動(dòng)lnmp失敗?5. 引入traits后，為什么index得是空的呢？6. python - 為什么寫了換行語句，結(jié)果還是沒有換行？7. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。8. 各位python爬蟲大牛看過來,這個(gè)網(wǎng)站的反爬蟲怎么處理9. mysql - SQL能這樣表示嗎?10. python - django中普通用戶如何利用admin修改自己的信息？
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備