HTML5 Canvas实现图片擦除效果

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,_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,1,2 * Math.PI);
            this.ctx.fill();
            this.ctx.stroke();
            // this.ctx.restore();

            this.canvas.addEventListener(tapmove,this.tapMoveHandler,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,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,false);
            }
        },removeEvent: function(){
            this.canvas.removeEventListener(tapstart,false);
            this.canvas.removeEventListener(tapend,false);
            this.canvas.removeEventListener(tapmove,false);
        }
    };
})(window);

HTML5 Canvas实现图片擦除效果

相关推荐