名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。
- 本篇文章的具体介绍如下
修改img.src时涂层也会自动适应新图片的尺寸.
修改layer数据库函数可更改涂层样式
以下是网页hTML源具体代码(已增加移动设备支持):
<!DOCTYPE html>
<html>
<body>
<canvas/>
<script>
(function(bodyStyle) {
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute';
img.addEventListener('load', function(e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
function layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
}
function eventDown(e){
e.preventDefault();
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
}
function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 5, 0, Math.PI * 2);
fill();
}
}
}
canvas.width=w;
canvas.height=h;
canvas.style.backgroundImage='url(' img.src ')';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent';
ctx.fillRect(0, 0, w, h);
layer(ctx);
ctx.globalCompositeOperation = 'destination-out';
canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
});
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=';
})(document.body.style);
</script>
</body>
</html>
需要判断是否刮完时用这段具体代码替换原具体代码的eventUp事件处理数据库函数:
e.preventDefault();
mousedown = false;
var data=ctx.getImageData(0,0,w,h).data;
for(var i=0,j=0;i<data.length;i =4){
if(data[i] && data[i 1] && data[i 2] && data[i 3]){
j ;
}
}
if(j<=w*h*0.1){
alert('ok');
}
这段具体代码中的0.1是10%的意思,在涂层的面积小于等于10%时,就弹出窗口,表示刮完了,可以根据需求自行调整
关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,html5,canvas,刮刮卡html5适合移动应用开发建设的12大特性