html5通过canvas实现刮刮卡效果示例分享_html5教程技巧
修改img.src时涂层也会自动适应新图片的尺寸.
修改layer函数可更改涂层样式
以下是HTML源代码(已增加移动设备支持):
<script><br /> (function(bodyStyle) {<br /> bodyStyle.mozUserSelect = 'none';<br /> bodyStyle.webkitUserSelect = 'none';<br /> <br /> var img = new Image();<br /> var canvas = document.querySelector('canvas');<br /> canvas.style.backgroundColor='transparent';<br /> canvas.style.position = 'absolute';<br /> <br /> img.addEventListener('load', function(e) {<br /> var ctx;<br /> var w = img.width,<br /> h = img.height;<br /> var offsetX = canvas.offsetLeft,<br /> offsetY = canvas.offsetTop;<br /> var mousedown = false;<br /> <br /> function layer(ctx) {<br /> ctx.fillStyle = 'gray';<br /> ctx.fillRect(0, 0, w, h);<br /> }<br /> <br /> function eventDown(e){<br /> e.preventDefault();<br /> mousedown=true;<br /> }<br /> <br /> function eventUp(e){<br /> e.preventDefault();<br /> mousedown=false;<br /> }<br /> <br /> function eventMove(e){<br /> e.preventDefault();<br /> if(mousedown) {<br /> if(e.changedTouches){<br /> e=e.changedTouches[e.changedTouches.length-1];<br /> }<br /> var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,<br /> y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;<br /> with(ctx) {<br /> beginPath()<br /> arc(x, y, 5, 0, Math.PI * 2);<br /> fill();<br /> }<br /> }<br /> }<br /> <br /> canvas.width=w;<br /> canvas.height=h;<br /> canvas.style.backgroundImage='url('+img.src+')';<br /> ctx=canvas.getContext('2d');<br /> ctx.fillStyle='transparent';<br /> ctx.fillRect(0, 0, w, h);<br /> layer(ctx);<br /> <br /> ctx.globalCompositeOperation = 'destination-out';<br /> <br /> canvas.addEventListener('touchstart', eventDown);<br /> canvas.addEventListener('touchend', eventUp);<br /> canvas.addEventListener('touchmove', eventMove);<br /> canvas.addEventListener('mousedown', eventDown);<br /> canvas.addEventListener('mouseup', eventUp);<br /> canvas.addEventListener('mousemove', eventMove);<br /> });<br /> img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKkAAAAnCAYAAAB0b2iHAAAVNUlEQVR4Xu1cCXSUVZb+qpLaUlWpJQthR5BNdkEkgCzKae1W7Fmc0daZYzvtHNsZp9uZbu3WM924NNKg0rihuNAsLdpqSzd9dFyQVSAgkURlSQISlsTsa6WyJ/PdSv7Kq0ql6o+gDefUO4flpP56//vv+9693/3u/WPo5EB8xC1wAVvAEAfpBbw78aUFLBAHaRwIF7wF4iC94LcovsA4SOMYuOAtEAfpBb9F8QXGQRrHwAVvgT5BWtnUgVJ/G0oa2tHW0bdKZTAARhhgSgDsJiNSrAnwWo1w8P9GfhY+ZN6SBs7rb0c75/Xw+oykBAywJ8JsvHDsJesrlT9cq4xUG9fJNQ7gWhMiPJfelbfRlL6WDlQ1tfNPB/xtHWht7/p2Ip/fxr9cFmPAhsk0iKWPm10sdtRrl2jX9QnS/Bo/Vn9QgY+add6GG2clMIe6LFg82o5F6eaIwMur8GHF1iocaO2Zd8rUVDw/zgan6Rx2X+cy9V6W+1UtHthaizPBLxhx05xUPDDC+rUOk5zzmuYOFPlacbjYhx1nm1FQT6C2dkKAqw1TogGpSYmYmG7F4ktsGO80IYUHhKYNGReLHfXa+2uBNKukHk9vr8bnXY6kn8OAK8a68OtxSRjqTAzxPHvO1OHx3TU40e09ZOIxY1x4cYqTXvjCcaUfnKjGb/bWozr45AZ8Z6oHvxlvp7fr32Fq7UAgKuUV12Pj5z5k+3XWTxIScO14J/5jpA2DHYkhXvVisWM/gRPx8j496bmBVO5lwPcu9+L+UbYQ8F0sxj1fIBUvWeRrQ9bxKjx7uAk1OvGp7tbES11YNsEecuAvFjt++yAlyRxsI0/qJptd9u5EK2NZlZ/8KnwDbFasudqN2V5zcK0Xi3HPF0iF1+7/sgorDjWito8dS6JnFqbTyNDfEtmX4MYZXvyM4V+4qoyLxY7fOkgtThuWTLNjFEN4AJ7doGxq78Tpmia8lVuLz5rUZRnx73NTcM8IWzCJuliMez5A2kg3mltajyd31eBYGG0yMtNcNNKOazLMcEvGxOFjBlVQ0oA/n2hCiUKH5LMEuxWrF7iRyQMvZONiseO3DlKb2461VyVjotvU695fUQV453A5nstrQc9+GHDjdC8eIY/TklS9xpUNrmWiUd7Yjjpmw3IQpBcmgXKClZ7HS1VAOKzL0jupUBcn80jCos3TzHkEEjKHKAupfcwRC6QN9Hol5JmlfG6fkE6OJGY3kv2LCiBJ4FkmSZsPluHFM6GIs9oteHBGMjJTzQE1REuK+Jgop+f9tLgOa7LrcSoE2DzwC9Nwz2BL4MDrtaOsSyhHvaoocL2SyJm4KaIgpDExc1NRiMS1ReUQNaaM/ybyxhn2hMB35PsSJRo4l4k/T+LzihX8LZ1opGJh5txiiwFMAjXvr+2LxtFFORKVQxQiWYOmnoQz/n5x0mggFTnlg2MVePLzJvQ4UwNuzUzFL8hLNTkqlnHFOctchXVN2J5Xh12lrShu6kSzQiWMnEwy4FnD7LiZScVIJhWOMGWAWEQFAV5Y3YhtJ3zYXdaKEs5DbAWGNseVw+24bbg1wPfE+NqIBlIx6omaZrybXYENpV0A1UbKIBc2zUvGAB6CbCZKj++qDvWixgT8ZI4H/zTQGgBG+JDlCYf9pKACK460wsQ1pRMYk1ItuHa0EzPdif0CqRxwOSw5Z3x473QTTlJRqNHODJ8j2ZqI8WlW3DQmCVOTTQGprduxB5aWU1yD+z+qw1faQs0W3DPNhuoiH94pbkONPD4Nkp5sxnRDM/6vRnkiqw3PXO3CPHp/VY4U+Sy7oBwP5DQr9CYB9y5Kx78NNAUihTrOGaRyosRbnahtxZZDZfhjibJpJhN+e7UX16dbgveMBVLxekcZIp/ZXwviPebwptixbJYTM9zmoDQkaxLPfuhUNZ7N9aMoLHSGT+p0W7Fkhguz6dk0GawvkC4Zm0Sv0oZ3cyuw9nQb1KlN9JCPzXFjDjdFIsdHx8rxyCH10AIpgxxYO8OJka7e0Uhbl3j7isYORoD2AN8XzVm0U/lXIoDecC9gKCj3YePBWuzyxcjYqCRcPyEZPybvFSVBvLt84/0TVVQ5fD182mjEaGsnCsITEIsFNw9qx1snVZsY8P3pHvySkqTqRPKqm7Fhdym2KCTdmGTFC/PdmMU9OCeQmrkJd1PPHMZwJkMeQkJwHTftYHEDtn/VpnhRYNQoF56f4sBAegJtRAOpbMSxqka8tKsc23wx8Rm8YPxYD1ZPSgp4ARmyOTmF1Xj0YAMqdWbTTq8dz8xOxhRSGVGYIoF00VQ37h5ixYEvK7HqSAtUCdloNWNJphvXUB920fuV0Ytv+bQET32pwtiARVPceHicPcRr63/SnitjHfZ6hoyjJT6s2ksZMXI2FuG2Bsy8jOsb2wVUGb1A2sdiU4c68dPBBqz7pC5EXkwd7MSGK5yBSCWDTAB7z9ZShqxFoeLPRlPBEKwIRQgf/fKk/TGmx2vDE7NcgU1XqybRjCtZ7r7jDAOfNMGv3CzdY8GCDBOchk6crGzBflKABuXzhOQkvDrfhQm8l/CvI5V+PLutAvvCChEDXAxJKdRt29qRU9qMMyGfGzBfdFCGPQnDkUCaOc6Jay2teCq3UdFPuRBTIn4+y4PFGZYg/yqsa8Xre0vwarl6Soz40Wwv7hmZFDgI2givHkWys1TzhA8KxxOvFM2OwgGPk478YU8Z3q4KO6WM5eNdiUhjcCupaaNH7Ag4m+AwGHFHZgruHGqBk4ctGkgtfIhEevqGDiNuyfTi70hFtnxSik0VanXCjBULPbiW0VRCfjUj5XuHy/D44RYE6zmGBPzXHC9uH2aNWGH7RkCaaE7EDyc4cMNQG4aT56gbEgukOYU1eDmvsYs70RvY0hx4gorCpcnCxQzkgq1457NyvK1yQYaaZxa6sYCWFw724dFyLP2succI3IFLhzuxZHwSCXoiWmjYY1V+bMqqQY5S+XJmuLB5nhMDIoKUkSHdhMYKcmSVhjJM3nWll6HOHPDkGvYKCJKNu0qxWdWduBn3zPXiLqod6siraMDKrZXYq6wlElCdA114PdPBSJYQFaTiFPbS2z90wI96ZSJJ2H5OqjGFVSwJ59WMOPu/rMa64y0hETDJm4T1c10YS0rSF0injXTihwSVQSBO4GUMsGIgQb2bXPpRUpzGHtSHhPz8mhZs2l2CPync1exKwrqrXJjkiUyBvhGQBtbHzbtxggt3j7IGsjYNqFHDPR+yliCrZsYnJ0423MGfieeQMCGfFda2YHt+DT6qUJBiNuHxBV5cN8CCM/WteG1vKTaWKZ8nmvDIPDeuH2gL8lbJLD8nJdhEwip9A+MI8Ez+GcQwJ7y0tyflI3FBkpApbgffneTCveRcQmlULnVcNuPjErzZU7JigmHEfxKkPx6RFILBvWcoU+2uRn4M7mwjJVk3JxmXMWJEs2MTjfXWgRK8XKTYgPe+a5YX/0pgCR2RIVl2PvnhG1lhHpfJ3f3zUvADUput1HhDOKkEDocVT89xkT/SHSsPLf/NKW/ACzsqkaVEKQn56xnyB9HOWUV1WM6KY6HyrNMneLDyMnsvFUAzUv9A2kvM79oxkYcaCKq6XkYW4uzFvZdYg3wxFpfS5quRRhRy3TJfC46Xt6CgrgUneYPihg7llHY/BkG4fKEX32O4PVxJTrujHB8pfMFMOvDy3GRMS+kpKojcI40eLVx7AvdMkhKRTTSpLBJIe3s3VtXIU+8nSMNLuqe7D8sf1MPCHf0BgXLfKHtILf4gVYCVO2OXoPWCtKShGS9tpw163BlMTitenOvGDCYm6pCD/z6lw+VfqJm2Addd7sEj5M47eZDDQTpkRDJenuYkb+3NH4t5+P+cXYLnTylgYAK9gvszk55565EyLFdDfUIi/vcqL/5xsDVEVQhxBX294xSpLBpJzBeYykbXMhPNPlWHN062hILIZsHz5CRzCBA9Walk96fqm7GD8tN7Rc1gH0bsQSMspycVkMpJXr2tEvuUZMGZasf6zGSMjqDv9jW5PpACZhY4VjNUTfeYQ4ws8tdfckqx6nioij/tMg9WscSpaoeFdY3404EabK8nP+z21I3t0inVGaIe6AXpqTo/nt5WhWyFPrgzHFg304lRYaqCRKj3T1TisawG1CnGmMoEavVkJ/ac7g3SyfzsuYmOiBKaKD17TtdgKfseeqipAdczy78ljZz1QDneVHiyM92BV7k3l5DO9TX65Umj6aTimY5UNuHN/eXYUq3GRHoPEvH7JVmgx4rmSUVMzqNk8sq+auxUMyNt9fTkaRS/LZ3tONvYm5x/l+E+Ekhlc9cyc5+ocB75NnHQNXh6wntG9IJUvj5rohtL6XXSu9UF+Zls1vaCSioMfqhChSMlCb/PJN/jWrRI6SP3FrlJihdaV2ROKaWjHB++UiK2XpCeJuif2l6JbOWgnk+Qzp3sxRMMz/Y+utaOVDVh/a4yvKsQYrn/3cz+38ipV7J/gneaBw8yWVU16nCwnjeQysSn6tvw19xSrDkZGvfnTfFiJb2HEPpoIPWzLLg5qxQvqVort3J8hhXXMQkbw9PWQVdzgNrdBoaTIEzNZnJST4CTRgr3osGtnufCHElpu4eAqKi2CblVHbBZDEghT5PMWdri+uKk8tXUFAuGNDYjR5UfLLz/fA8WMpRqSoaA7RAP3NPbq/BpiARkxL/M9ODO4aGNN+rGiHfbeaYWK/fU4rRiSr0gLfUz3G8rx9ZzCPeL2RwkXWw7eoV7oTgePBSlG0zUive/KMMTR5UMPjER89OALMqUweDYbbfvdGf+37gnFcMerWrG29lleKss1JNexwdeyocSvh4NpKeqG7Cc3IyFluAYPNiB306yM1SbA2W7s6zGbGEYXaMyb4J0FUF6TV+JE7Pqn8z14LYhNojMJUPm+ZhSyNL8rnBsIjEdlpqER2czyyTXiuRJPR4bHpzmgJ/r/N0hP9TiyuiRyXiG7YYqTxN+9tecEjxHrTREiLKY8LOZbixK61IEtEKXlhzK2rbmV+ONE80hUpxekEriJPLXOlUBYeL0I/LhOyIkTq8xcfqLKlUZE/HL+V7cQp74Ya/EqSt0Pzy2y+lEGpKQHShitY3JoNqSKfJ6dw954GsDhyfj95dH5rbqvP3ypBaS719RcB2l8AfhUO0i6DPef8HM7dW85hBuAwLkf+an4HZmirFqzsfK6/HozloUKTs6giT9SYJ0BKUsqRPnlvuxMYtN04qXgALSgATFSs/S3FAJypNiw8NTnRhCsVgy9KPkrhuz61CgUEaLy47XFrowmsJzJJAunOzBEm5OVVMbXt9XijdUPZAJwH3M3G8aZAkeBEkov2DYXsXNyg0X1BMTsJBZ/rW83tNdvJead2F5I3aebkSOL0y/5K7ZWF3bwOx+HHlltMMu4NnNsuND2aF6syZBTaUEJdRLJKgsSlDrwyWoFAc2MNGUyNVbgooNUgHYSerEf9xHnTjEYanQM+I2HpqfssIVqz+3XyCVGm0GheLw1zwkBAuAqiPofEluamAMteO7CXs04xbSQ61go/URlS1QyrpujAPzKcLX+VgvL2hAbkO4QG3CMiZnN5AWBMX8HRTzVSDTPhY2o4z3JMJOMORzseVhasRs0pJl5EeS1ESr3cs9DpytwbI99ShVlpI6yBkoeY6gWK75GKk8HWLIfCzbj3BdXduyYKseJ2Z/Rp8jdTB10lldVZlodvRQ582vacQrO8vxniqUyswi5tMGaZQkS+oo5ocfBspPdzGHuJ1ivkh/fYH0kXGOqG8oSMVrBzm5PHek4mGC3YYXiIsrI5RBww3QP5D2bb/In9CL3sEKy51DLEFiHM24DeSkb5OTvhLCSXXclIb9Bb3YrcO6Glm+qbKo1pkv9fNT9BSbD5ZirapFsr/qDlZe7mRI1RIB8drFDN8HGTafYjOC3jJt+FMPzbDjAco+06lQCKhjSXldkY0hlz0Qx2MUCXruxarbJDceHJ0ULGV/XZAKJ89h1Ht+ZwWyIvRgjObbGGsmOwLdT7HGNwdSNiJ8f7I78OqDKnRHM66VYeoY34Fas6e6lxdUH8RFwT2BGipznu5hwGLqeg+MsQeSnv42mHhYYXmYYvMMykixGky010ck8RJ9c8XHocK0jZHjZVZrpESrUTbhmtLWls/Qv+mLOhyo6wy0tekZ6fLOGCPJDew7HUhSp2XUsUAqc4sMll/mw7pP67BPR4PJ37MwcSff4RLRXehAxAYTxgjhpLE8qdxfmnyEkz8bxskhnWB0KrczGdbz8uX5exFPVkUvZmcz7wjW2v95rINdRWz9YmhS5Z1YL5BJpekks+73j9RiO2v0peRygQ2lixzoMGE+G4VnJBuQe7gaGxW3NGCUB5uvcARBJiE52KpX4MPH0qrHfj/NqRil39FuwmzywpuHWjGEPE19EVDPi3iB5Ivi9LK8NgV05FoL0nHfkK5OKG3IhovEVMzMoaDUj4/JOw+zOFFJj8fyeXBIj2cKVYYx1JXncxOnkCZJeJc6ujpfLDvKhHLPQKseCwuHixqw8yzvWUupizw8QMW7W/Uu40t/0qo3RWvVU9bdq1WP0eLWeam4jzZTW/oiHTiR1j6kErPyk4aQJFMO8loeZFUSjHZgz/mV5sCz8qGkrm4mkJxm9nrShUtTspZJqwvQ8yqueKlKlkal0VaadSVkCrmWBuFAfVxCOr2ENOT6yYVlA7Vm4/B7ylwC/EDTM/+Vur0UBW30uF5yVJGcpEwYbnA9rzRLYtT12jP7DKhzypDwJWXWvl59lmfxSyM2n0+eUTZSWvMEUVL5EiohVEHsJ+vSWvPCN1GPHbXvaK9Ry/0kWZL84es0PWvPpzUnR3plXV2n2PxdVrNWUYpSSxpSBv0dJUnhznpG/JdD6LFS/BpdFpBD28QTIY5BlIoCJm8b9teAvT49gyrIr+Z58Q+DYnti7UtxkOoyf/wiPRYoaWjBLlKrQ2yIbqZMl1fRjNNhZe00KiBSnh3W3V+qZ944SPVYKX6NLgvk82XM9dvKsCVSSVtmYML033wx8xa+pxWJCvZ1kzhIdZk/fpEeC0jb36vsoX1b7VQJftGAOZS3fk15a5DypoaeeeMg1WOl+DW6LCC/pWXX5+V4vKAVWv+PqCgZTjMWU/y/kV1qIqOF/8qgWJPHQRrLQvHPdVtAEibJ6EWVkT5VUbLkVefUblUmXEbTO3EcpHotFb/ub2aBOEj/ZqaP31ivBf4fy4yuMTp6ExcAAAAASUVORK5CYII=';<br /> })(document.body.style);<br /></script>
需要判断是否刮完时用这段代码替换原代码的eventUp事件处理函数:
e.preventDefault();
mousedown = false;
var data=ctx.getImageData(0,0,w,h).data;
for(var i=0,j=0;i
j++;
}
}
if(j alert('ok');
}
这段代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了,可以根据需求自行调整

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
