文章詳情頁(yè)
javascript - 求助canvas繪制半透明的馬賽克？
瀏覽：258日期：2022-11-24 18:24:34
問(wèn)題描述
我的需求是提供給用戶使用鼠標(biāo)給上傳的證件涂抹馬賽克，我的思路是給canvas綁定鼠標(biāo)事件，沿著用戶的鼠標(biāo)按壓路徑，將一張半透明的png不停的繪制到證件上，現(xiàn)在我不想用半透明的Png疊加，想直接用canvas生成馬賽克，求皇軍帶路！
問(wèn)題解答
回答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 - react+百度地圖2. html5 - iOS的webview加載出來(lái)的H5網(wǎng)頁(yè)，怎么修改html標(biāo)簽select的樣式字體？3. vue.js - vue+webpack+vue-router 部署到nginx服務(wù)器下，非根目錄，前后端怎樣配置文件？4. javascript - 為什么當(dāng)index等于5的時(shí)候，不在當(dāng)前頁(yè)面跳轉(zhuǎn)到百度？不跳轉(zhuǎn)的代碼在倒數(shù)第五行5. angular.js - 關(guān)于angular react vue 我們?cè)谑裁磳?shí)際的開(kāi)發(fā)項(xiàng)目中使用？如何選擇？6. 手動(dòng)啟動(dòng)mysql服務(wù)出錯(cuò)，1067錯(cuò)誤，如何解決呢?7. index.php錯(cuò)誤，求指點(diǎn)8. 這是什么情況？？？9. 請(qǐng)教一條mysql的sql語(yǔ)句寫法；10. 跟著課件一模一樣的操作使用tp6,出現(xiàn)了錯(cuò)誤
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備