84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
没想到思路。
懂的大神附上代码。
认证高级PHP讲师
http://runjs.cn/detail/uk9ho4ad代码在上面自己看下
<p class="view"> <p class="box" id="bb"> <canvas id="cas" ></canvas> </p> </p>
var canvas = document.getElementById("cas"), ctx = canvas.getContext("2d"); var x1, y1, a = 30, timeout, totimes = 100, distance = 30; var saveDot = []; var canvasBox = document.getElementById("bb"); canvas.width = canvasBox.clientWidth; canvas.height = canvasBox.clientHeight; var img = new Image(); img.src = "pic1.JPG"; img.onload = function () { var w = canvas.height*img.width/img.height; ctx.drawImage(img, (canvas.width-w)/2, 0, w, canvas.height); // var box = document.querySelector('.box'); // box.style.backgroundImage='pic2.JPG'; tapClip() }; function getClipArea(e, hastouch){ var x = hastouch ? e.targetTouches[0].pageX : e.clientX; var y = hastouch ? e.targetTouches[0].pageY : e.clientY; var ndom = canvas; while(ndom.tagName!=="BODY"){ x -= ndom.offsetLeft; y -= ndom.offsetTop; ndom = ndom.parentNode; } return { x: x, y: y } } //通过修改globalCompositeOperation来达到擦除的效果 function tapClip() { var hastouch = "ontouchstart" in window ? true : false, tapstart = hastouch ? "touchstart" : "mousedown", tapmove = hastouch ? "touchmove" : "mousemove", tapend = hastouch ? "touchend" : "mouseup"; var area; var x2,y2; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.lineWidth = a * 2; ctx.globalCompositeOperation = "destination-out"; window.addEventListener(tapstart, function (e) { clearTimeout(timeout); e.preventDefault(); area = getClipArea(e, hastouch); x1 = area.x; y1 = area.y; drawLine(x1, y1); this.addEventListener(tapmove, tapmoveHandler); this.addEventListener(tapend, function () { this.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 += distance) { for (var y = 0; y < imgData.height; y += distance) { var i = (y * imgData.width + x) * 4; if (imgData.data[i + 3] > 0) { dd++ } } } if (dd / (imgData.width * imgData.height / (distance * distance)) < 0.4) { canvas.className = "noOp"; } }, totimes) }); function tapmoveHandler(e) { clearTimeout(timeout); e.preventDefault(); area = getClipArea(e, hastouch); x2 = area.x; y2 = area.y; drawLine(x1, y1, x2, y2); x1 = x2; y1 = y2; } }) } function drawLine(x1, y1, x2, y2){ // ctx.save(); // if(arguments.length==2){ // saveDot = [[x1, y1]]; // ctx.beginPath(); // ctx.arc(x1, y1, a, 0, 2 * Math.PI); // ctx.fill(); // }else { // saveDot.push([x2,y2]); // if(saveDot.length >= 3){ // ctx.beginPath(); // ctx.moveTo(saveDot[0][0], saveDot[0][1]); // ctx.quadraticCurveTo(saveDot[1][0], saveDot[1][1], saveDot[2][0], saveDot[2][1]); // ctx.stroke(); // saveDot = [saveDot.pop()]; // } // } // ctx.restore(); ctx.save(); ctx.beginPath(); if(arguments.length==2){ ctx.arc(x1, y1, a, 0, 2 * Math.PI); ctx.fill(); }else { ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } ctx.restore(); } //使用clip来达到擦除效果 function otherClip() { var hastouch = "ontouchstart" in window ? true : false, tapstart = hastouch ? "touchstart" : "mousedown", tapmove = hastouch ? "touchmove" : "mousemove", tapend = hastouch ? "touchend" : "mouseup"; var area; canvas.addEventListener(tapstart, function (e) { clearTimeout(timeout); e.preventDefault(); area = getClipArea(e, hastouch); x1 = area.x; y1 = area.y; ctx.save(); ctx.beginPath(); ctx.arc(x1, y1, a, 0, 2 * Math.PI); ctx.clip(); ctx.clearRect(0, 0, canvas.width, canvas.height); 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 += distance) { for (var y = 0; y < imgData.height; y += distance) { var i = (y * imgData.width + x) * 4; if (imgData.data[i + 3] > 0) { dd++ } } } if (dd / (imgData.width * imgData.height / (distance * distance)) < 0.4) { canvas.className = "noOp"; } }, totimes) }); function tapmoveHandler(e) { e.preventDefault(); area = getClipArea(e, hastouch); x2 = area.x; y2 = area.y; var asin = a * Math.sin(Math.atan((y2 - y1) / (x2 - x1))); var acos = a * Math.cos(Math.atan((y2 - y1) / (x2 - x1))); var x3 = x1 + asin; var y3 = y1 - acos; var x4 = x1 - asin; var y4 = y1 + acos; var x5 = x2 + asin; var y5 = y2 - acos; var x6 = x2 - asin; var y6 = y2 + acos; ctx.save(); ctx.beginPath(); ctx.arc(x2, y2, a, 0, 2 * Math.PI); ctx.clip(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.restore(); ctx.save(); ctx.beginPath(); ctx.moveTo(x3, y3); ctx.lineTo(x5, y5); ctx.lineTo(x6, y6); ctx.lineTo(x4, y4); ctx.closePath(); ctx.clip(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.restore(); x1 = x2; y1 = y2; } }) }
http://runjs.cn/detail/uk9ho4ad
代码在上面自己看下