- <script type="text/javascript">
- varimg = newImage();
- varcanvas = document.querySelector('canvas');
- // canvas.style.backgroundColor = 'transparent';
- canvas.style.position = 'absolute';
- varimgs = ['images/p_0.jpg', 'images/p_1.jpg'];
- varnum = Math.floor(Math.random() * 2);
- img.src = imgs[num];
- img.addEventListener('load', function(e) {
- varctx;
- varw = img.width,
h = img.height; 尾
varoffsetX = canvas.offsetLeft, 接尾
- offsetY = canvas.offsetTop;
- varmousedown = false;
- // 刮刮卡图层背景
- functionlayer(ctx) {
- ctx.fillStyle = 'gray';
- ctx.fillRect(0, 0, w, h);
- }
- // 鼠标放下
- functioneventDown(e) {
- e.preventDefault();
mousedown = true; 再尾
} 接再尾
- // 鼠标抬起
- functioneventUp(e) {
- e.preventDefault();
- mousedown = false;
- }
- // 鼠标移动
- functioneventMove(e) {
- e.preventDefault();
- if(mousedown) {
- if(e.changedTouches) {
- e = e.changedTouches[e.changedTouches.length - 1];
- }
- varx = (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, 10, 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);
- });
- </script>
来源: http://www.bubuko.com/infodetail-2948075.html