JS实现canvas仿ps橡皮擦刮卡效果详解

<div class=\"box\" id=\"bb\"><canvas id=\"cas\" width=\"1366\" height=\"651\"></canvas></div><script type=\"text/javascript\" charset=\"utf-8\">var canvas = document.getElementById(\"cas\"),ctx = canvas.getContext(\"2d\");var x1, y1, a = 30,timeout, totimes = 100,jiange = 30;canvas.width = document.getElementById(\"bb\").clientWidth;canvas.height = document.getElementById(\"bb\").clientHeight;var img = new Image();img.src = \"sha.jpg\";img.onload = function() {ctx.drawImage(img, 0, 0, canvas.width, canvas.height)//ctx.fillRect(0,0,canvas.width,canvas)tapClip()}//通过修改globalCompositeOperation来达到擦除的效果function tapClip() {var hastouch = \"ontouchstart\" in window ? true : false,tapstart = hastouch ? \"touchstart\" : \"mousedown\",tapmove = hastouch ? \"touchmove\" : \"mousemove\",tapend = hastouch ? \"touchend\" : \"mouseup\";ctx.lineCap = \"round\";ctx.lineJoin = \"round\";ctx.lineWidth = a * 2;ctx.globalCompositeOperation = \"destination-out\";canvas.addEventListener(tapstart, function(e) {clearTimeout(timeout)e.preventDefault();x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft;y1 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop;ctx.save();ctx.beginPath()ctx.arc(x1, y1, 1, 0, 2 * Math.PI);ctx.fill();ctx.restore();canvas.addEventListener(tapmove, tapmoveHandler);canvas.addEventListener(tapend, function() {canvas.removeEventListener(tapmove, tapmoveHandler);timeout = setTimeout(function() {var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);var dd = 0;for (var x = 0; x < imgData.width; x += jiange) {for (var y = 0; y < imgData.height; y += jiange) {var i = (y * imgData.width + x) * 4;if (imgData.data[i + 3] > 0) {dd++}}}if (dd / (imgData.width * imgData.height / (jiange * jiange)) < 0.4) {canvas.className = \"noOp\";}}, totimes)});canvas.addEventListener(tapmove, tapmoveHandler);canvas.addEventListener(tapend, function() {canvas.removeEventListener(tapmove, tapmoveHandler);timeout = setTimeout(function() {var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);var dd = 0;for (var x = 0; x < imgData.width; x += jiange) {for (var y = 0; y < imgData.height; y += jiange) {var i = (y * imgData.width + x) * 4;if (imgData.data[i + 3] > 0) {dd++}}}}, totimes)});}</script><script type=\"text/javascript\">window.setTimeout(\'CountDown()\', 100);// End</script>

以上就是JS实现canvas仿ps橡皮擦刮卡效果详解的详细内容，更多关于JS 的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章: