• HTML5实体刮刮乐效果!


    先来看DEMO吧,http://codepen.io/jonechen/pen/ZOyxmq

    HTML部分:

    <div class="msg">
    	<a href="javascript:void(0)" onclick="window.location.reload()">再试一次</a>
    </div>
    <canvas class="canvas"></canvas>
    

    JS部分:

    var bodystyle = document.body.style;
    bodystyle.mozUserSelect = 'none';
    bodystyle.webkitUserSelect = 'none';
    var img = new Image();
    var canvas = document.querySelector('canvas');
    canvas.style.backgroundColor = 'transparent';
    canvas.style.position = 'absolute';
    var imgs = ['http://labfile.oss.aliyuncs.com/courses/133/p_0.jpg', 'http://labfile.oss.aliyuncs.com/courses/133/p_1.jpg'];
    var num = Math.floor(Math.random() * 2);
    img.src = imgs[num];
    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) {
    			// changedTouches 最近一次触发该事件的手指信息
    			if (e.changedTouches) {
    				e = e.changedTouches[e.changedTouches.length - 1];
    			}
    			var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;
    			var 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);
    }, false)
    
  • 相关阅读:
    Day08_固化命令、grep、sed及awk命令
    Day07_网络管理、SSH、shell及元字符
    Day06_nginx及反向代理、共享存储nfs
    安装Apache所踩的的坑
    使用JS制作小游戏贪吃蛇
    清除浮动的几种方式
    纯CSS3图片反转
    在JAVASCRIPT中,为什么document.getElementById不可以再全局(函数外)使用?
    关于钉钉开发,心得
    javascript计算两个时间差
  • 原文地址:https://www.cnblogs.com/jone-chen/p/5643990.html
Copyright © 2020-2023  润新知