HTML5 Canvas implementation of the image erase effect, the effect is mainly applied to the canvas Globalcompositeoperation property value implementation.
Index.html
<! DOCTYPE html><html lang="ZH-CN"><head> <meta charset="Utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0, User-scalable=no " name=" Viewport "> <meta content="yes" name="Apple-mobile-web-app-capable" > <meta content="Black" name=" Apple-mobile-web-app-status-bar-style "> <meta content="Telephone=no" name="Format-detection"> <meta content="Email=no" name="Format-detection"> <title>Eraser.js</title> <style> HTML,Body{ width: %; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; } Canvas{ width: %; max-width: 640px; margin: 0 auto; Display: block; } </style></head><body> <canvas id="Canvas"></Canvas> <script src="./js/eraser.js"></script> <script>window.addeventlistener (' Load ', function(){var canvas = document. Queryselector (' #canvas '), eraser = new eraser (canvas, './img/demo.jpg '); Eraser.init (); }, false); </script></body></html>
Eraser.js
( function(exports){ varDocument = exports.document, Hastouch =' Ontouchstart ' inchExports?true:false, Tapstart = Hastouch?' Touchstart ':' MouseDown ', Tapmove = Hastouch?' Touchmove ':' MouseMove ', Tapend = Hastouch?' Touchend ':' MouseUp ', x1, y1, x2, y2; function Eraser(canvas, Imgurl){ This. Canvas = Canvas; This. CTX = Canvas.getcontext (' 2d '); This. Imgurl = Imgurl; This. Timer =NULL; This. LineWidth = -; This. Gap =Ten; }; Exports. Eraser = Eraser; Eraser.prototype = {init: function(args){ for(varPinchargs) { This[P] = args[p]; }var_this = This, IMG =NewImage (); This. Canvaswidth = This. Canvas.width =Math. Min (Document.body.offsetWidth,640);//this.canvasheight = This.canvas.height;IMG.SRC = This. Imgurl; Img.onload = function(){_this.canvasheight = _this.canvaswidth * This. Height/ This. width; _this.canvas.height = _this.canvasheight; _this.ctx.drawimage ( This,0,0, _this.canvaswidth, _this.canvasheight); _this.initevent (); }; }, Initevent: function(){ This. Ctx.linecap =' Round '; This. Ctx.linejoin =' Round '; This. Ctx.linewidth = This. linewidth; This. ctx.globalcompositeoperation =' Destination-out '; This. Tapmovehandler = This. Ontapmove.bind ( This); This. Tapstarthandler = This. Ontapstart.bind ( This); This. Tapendhandler = This. Ontapend.bind ( This); This. Canvas.addeventlistener (Tapstart, This. Tapstarthandler,false); This. Canvas.addeventlistener (Tapend, This. Tapendhandler,false); }, Ontapstart: function(EV){Ev.preventdefault (); X1 = Hastouch? ev.targettouches[0].pagex- This. Canvas.offsetLeft:ev.pageX- This. Canvas.offsetleft; Y1 = Hastouch? ev.targettouches[0].pagey- This. Canvas.offsetTop:ev.pageY- This. canvas.offsettop;//This.ctx.save (); This. Ctx.beginpath (); This. CTX.ARC (x1, y1,1,0,2*Math. PI); This. Ctx.fill (); This. Ctx.stroke ();//This.ctx.restore (); This. Canvas.addeventlistener (Tapmove, This. Tapmovehandler,false); }, Ontapmove: function(EV){Ev.preventdefault ();var_this = This;if(! This. timer) { This. Timer = SetTimeout ( function(){x2 = Hastouch? ev.targettouches[0].pagex-_this.canvas.offsetleft:ev.pagex-_this.canvas.offsetleft; y2 = Hastouch? ev.targettouches[0].pagey-_this.canvas.offsettop:ev.pagey-_this.canvas.offsettop;//_this.ctx.save ();_this.ctx.moveto (x1, y1); _this.ctx.lineto (x2, y2); _this.ctx.stroke ();//_this.ctx.restore ();x1 = x2; y1 = y2; _this.timer =NULL; }, +); }}, Ontapend: function(EV){Ev.preventdefault ();var_this = This, i =0, Count =0, Imgdata = This. Ctx.getimagedata (0,0, This. Canvaswidth, This. canvasheight); for(varx=0; x This. Gap) { for(vary=0; y This. gap) {i = (Y * imgdata.width + x) *4;if(Imgdata.data[i +3] >0) {count++; } } }if(Count/(Imgdata.width * imgdata.height/( This. Gap * This. Gap)) <0.6) {SetTimeout ( function(){_this.removeevent (); Document.body.removeChild (_this.canvas); _this.canvas =NULL; }, +); }Else{ This. Canvas.removeeventlistener (Tapmove, This. Tapmovehandler,false); }}, Removeevent: function(){ This. Canvas.removeeventlistener (Tapstart, This. Tapstarthandler,false); This. Canvas.removeeventlistener (Tapend, This. Tapendhandler,false); This. Canvas.removeeventlistener (Tapmove, This. Tapmovehandler,false); } };}) (window);
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
HTML5 Canvas for picture erase effects