HTML5 Canvas实现图片擦除效果

来源：互联网发布：手机信号防干扰软件编辑：程序博客网时间：2024/05/16 18:08

HTML5 Canvas实现图片擦除效果，该效果主要应用了canvas的globalCompositeOperation 属性值实现。

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: 100%;            margin: 0;            padding: 0;            overflow-x: hidden;            overflow-y: auto;        }        canvas{            width: 100%;            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){    var document = exports.document,        hastouch = 'ontouchstart' in exports ? 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 = 30;        this.gap = 10;    };    exports.Eraser = Eraser;    Eraser.prototype = {        init: function(args){            for(var p in args){                this[p] = args[p];            }            var _this = this,                img = new Image();            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;                }, 40);            }        },        onTapEnd: function(ev){            ev.preventDefault();            var _this = this,                i = 0,                count = 0,                imgData = this.ctx.getImageData(0, 0, this.canvasWidth, this.canvasHeight);            for(var x=0; x<imgData.width; x+=this.gap){                for(var y=0; y<imgData.height; 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;                }, 40);            }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);

1 0