文章詳情頁

javascript - 求助canvas繪制半透明的馬賽克？

瀏覽：223日期：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)了疊加馬賽克的基本算法。

JavaScript

上一條：html5 - rudy編譯sass的時(shí)候有中文報(bào)錯(cuò)下一條：html5 - FileReader怎樣一次讀取多個(gè)文件？

相關(guān)文章：

1. docker - 各位電腦上有多少個(gè)容器??？容器一多，自己都搞混了，咋辦呢？2. java - spring boot 如何打包成asp.net core 那種獨(dú)立應(yīng)用?3. java - 在用戶不登錄的情況下，用戶如何添加保存到購物車？4. datetime - Python如何獲取當(dāng)前時(shí)間5. docker start -a dockername 老是卡住，什么情況？6. javascript - nginx反向代理靜態(tài)資源403錯(cuò)誤?7. docker網(wǎng)絡(luò)端口映射，沒有方便點(diǎn)的操作方法么？8. 安全性測(cè)試 - nodejs中如何防m(xù)ySQL注入9. javascript - 關(guān)于apply（）與call（）的問題10. python - 調(diào)用api輸出頁面，會(huì)有標(biāo)簽出現(xiàn)，請(qǐng)問如何清掉？

排行榜

					
					java - spring boot 如何打包成asp.net core 那種獨(dú)立應(yīng)用?
					1. docker - 各位電腦上有多少個(gè)容器??？容器一多，自己都搞混了，咋辦呢？
					2. docker start -a dockername 老是卡住，什么情況？
					3. docker網(wǎng)絡(luò)端口映射，沒有方便點(diǎn)的操作方法么？
					4. javascript - nginx反向代理靜態(tài)資源403錯(cuò)誤?
					5. 安全性測(cè)試 - nodejs中如何防m(xù)ySQL注入
					6. java - 在用戶不登錄的情況下，用戶如何添加保存到購物車？
					7. datetime - Python如何獲取當(dāng)前時(shí)間
					8. javascript - 關(guān)于apply（）與call（）的問題
					9. docker容器呢SSH為什么連不通呢？
					10. 
			熱門標(biāo)簽

					
					PHP

					JavaScript

					HTML

					CSS

					java

					vue

					數(shù)據(jù)庫

					微信

					百度

					

av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

javascript - 求助canvas繪制半透明的馬賽克？

javascript - 求助canvas繪制半透明的馬賽克？