這是一款HTML5 canvas橡皮擦擦拭效果。該效果通過canvas來制作遮罩層和擦拭用的橡皮擦，用戶可以通過移動鼠標來移除遮罩層，效果非常炫酷。

因為發代碼有時會排版混亂，所以先發圖演示了。源碼已經打包好了，想學習的朋友可以下載練習練習，你不一定會哦。小編每天都會分享web前端和一些小項目，還有php方面的知識，第一時間會在我的微信朋友圈發布，源碼下載加imoee88。首先把代碼擼起來！首先把代碼擼起來！首先把代碼擼起來！重要的事說三遍。借用某位大V的話說，“編程是門手藝活”。什么意思？得練。

使用方法

HTML結構：

該HTML5 canvas橡皮擦擦拭效果由兩個元素組成。

CSS樣式

為該HTML5 canvas橡皮擦擦拭效果添加下面的CSS樣式。

body {

min-height: 100vh;

background-image: url(../img/1.jpg);

background-size: cover;

overflow: hidden;

}

#canvas-overlay {

position: relative;

z-index: 98;

opacity: 0.85;

}

#canvas-lines {

position: absolute;

top: 0;

left: 0;

z-index: 99;

opacity: 0.05;

}

JavaScript

然后通過js代碼創建可交互的橡皮擦效果，js代碼在今日頭條排版實在頭疼就不寫了，看源碼最好，結構比較清晰。

總結

以上是生活随笔為你收集整理的java做橡皮擦效果_HTML5 canvas橡皮擦擦拭效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。