HTML5 Canvas实现图片擦除效果

最新推荐文章于 2022-04-06 20:04:43 发布

herbertyoung

最新推荐文章于 2022-04-06 20:04:43 发布

阅读量4.1k

点赞数 1

分类专栏： HTML5 JavaScript 文章标签： html5 canvas 图片擦除效果

本文链接：https://blog.csdn.net/yhb241/article/details/47257485

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

HTML5

5 篇文章 0 订阅

订阅专栏

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);