JS canvas 橡皮擦刮卡效果
java李杨勇 人气:0效果演示:
主要JS代码实现
<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>
加载全部内容