html5实现刮刮卡效果
通过Canvas实现的可刮涂层效果.
修改img.src时涂层也会自动适应新图片的尺寸.
修改layer函数可更改涂层样式.
涂层:
可刮效果:
以下是HTML源代码(已增加移动设备支持):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<!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事件处理函数:
1
2
3
4
5
6
7
8
9
10
11
|
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实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
- Html5实现移动端、PC端 刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...
- Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...
- qt qml 刮刮卡效果
用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...
- 用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
- Atitit .html5刮刮卡的gui实现总结
Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel ,这个十mask div.....posti ...
- Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View
一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...
- HTML5 简单实现刮刮乐效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas实现刮刮卡效果
canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener touchstart.tou ...
随机推荐
- css margin塌陷问题
一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...
- Cocos-2d 坐标系
Cocos-2d中,涉及到4种坐标系: GL坐标系:Cocos2D以OpenglES为图形库,所以它使用OpenglES坐标系.GL坐标系原点在屏幕左下角,x轴向右,y轴向上. getLocation ...
- 每日英语:Why Are Items Pricier in China?
In China, consumers pay nearly $1 more for a latte at Starbucks than their U.S. counterparts. A Cadi ...
- c++11特性与cocos2d-x 3.0之std::bind与std::function
昨天同事让帮忙写一小功能,才发现cocos2d-x 3.0 和 cocos2d-x 3.0rc0 差别还是相当大的. 发现Label这一个控件,3.0就比rc0版本多了一个创建函数,更为关键的是3.0 ...
- python爬取百思不得姐视频
# _*_ coding:utf-8 _*_ from Tkinter import * from ScrolledText import ScrolledText import urllib #im ...
- hdu26道动态规划总结
前言:我们队的dp一直是我在做,说不上做的很顺,有些可以做,有些不能做.到现在为止,做dp题目也有七八十道了,除了背包问题的题目我可以说有百分之七八十的把握ac的话,其他类型的dp,还真没有多大把握. ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 理解Hash
哈希表(hash table)是从一个集合A到另一个集合B的映射(mapping). 映射是一种对应关系,而且集合A的某个元素只能对应集合B中的一个元素.但反过来,集合B中的一个元素可能对应多个集合A ...
- Winform 加密连接字符串“未能提供RsaProtectedConfigurationProvider加密,对象已存在”的解决方案
当一台机器已安装软件,并有新用户需要使用此软件时提示“未能提供RsaProtectedConfigurationProvider加密,对象已存在”. 这是因为加密模式是用户模式,需要运行以下脚本添加新 ...
- hadoop中的Jobhistory历史服务器
1. 启动脚本 mr-jobhistory-daemon.sh start historyserver 2. 配置说明 jobhistory用于查询每个job运行完以后的历史日志信息,是作为一台单独 ...