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

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

使用方法

HTML結(jié)構(gòu)：

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

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代碼創(chuàng)建可交互的橡皮擦效果，js代碼在今日頭條排版實(shí)在頭疼就不寫了，看源碼最好，結(jié)構(gòu)比較清晰。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。