【html5 canvas】使用Canvas做出橡皮擦效果

最新推荐文章于 2024-04-01 16:46:43 发布

snow_finland

最新推荐文章于 2024-04-01 16:46:43 发布

阅读量3.2k

点赞数

分类专栏： HTML5 canvas javascript 橡皮擦效果文章标签： html5 canvas 橡皮擦橡皮擦效果

本文链接：https://blog.csdn.net/snow_finland/article/details/42267527

版权

javascript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML5

9 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
<title>My Canvas 0.1</title>
<style type="text/css">
html,body,div,img{
	margin:0;
	padding:0;
}
a,a:hover{
	text-decoration:none;
}
.background{
	width:100%;
	position:fixed;
	top:0;
	left:0;
}
</style>
</head>

<body>
<img src="images/background.png" class="background resizeContainer"/>
<div id="J_cover" class="resizeContainer"></div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/lottery.js"></script>
<script type="text/javascript">
var canvas = {
	init : function(){
		var self = this;
		var node = document.getElementById('J_cover'),
			canvas_url = 'images/cover.png',
			type = 'image';
		
		var lottery = new Lottery(node, canvas_url, type, window_w, window_h, self.callback);
        lottery.init();
	},
	callback : function(){
		$('#J_cover').hide();
	}
}
var window_h, window_w;
$(document).ready(function(){
	window_w = $(window).width();
	window_h = $(window).height();
	
	$('.resizeContainer').width(window_w).height(window_h);
	
	canvas.init();
});
</script>
</body>
</html>

lottery.js

function Lottery(node, cover, coverType, width, height, drawPercentCallback) {
//node：canvas的id，cover：上面一层的图片地址，coverType：'image'or'color'，width：canvas宽, height：canvas高, drawPercentCallback：回调函数
 //canvas
    this.conNode = node;

    this.background = null;
    this.backCtx = null;

    this.mask = null;
    this.maskCtx = null;

    this.lottery = null;
    this.lotteryType = 'image';

    this.cover = cover || "#000";
    this.coverType = coverType;
    this.pixlesData = null;

    this.width = width;
    this.height = height;

    this.lastPosition = null;
    this.drawPercentCallback = drawPercentCallback;

    this.vail = false;
}

Lottery.prototype = {
    createElement: function(tagName, attributes) {
        var ele = document.createElement(tagName);
        for (var key in attributes) {
            ele.setAttribute(key, attributes[key]);
        }
        return ele;
    },

    getTransparentPercent: function(ctx, width, height) {
        var imgData = ctx.getImageData(0, 0, width, height),
            pixles = imgData.data,
            transPixs = [];

        for (var i = 0, j = pixles.length; i < j; i += 4) {
            var a = pixles[i + 3];
            if (a < 128) {
                transPixs.push(i);
            }
        }
        return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
    },

    resizeCanvas: function(canvas, width, height) {
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').clearRect(0, 0, width, height);
    },

    resizeCanvas_w: function(canvas, width, height) {
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').clearRect(0, 0, width, height);

        if (this.vail) this.drawLottery();
        else this.drawMask();
    },

    drawPoint: function(x, y, fresh) {
        this.maskCtx.beginPath();
        this.maskCtx.arc(x, y, 20, 0, Math.PI * 2);
        this.maskCtx.fill();

        this.maskCtx.beginPath();

        this.maskCtx.lineWidth = 60;
        this.maskCtx.lineCap = this.maskCtx.lineJoin = 'round';

        if (this.lastPosition) {
            this.maskCtx.moveTo(this.lastPosition[0], this.lastPosition[1]);
        }
        this.maskCtx.lineTo(x, y);
        this.maskCtx.stroke();

        this.lastPosition = [x, y];

        this.mask.style.zIndex = (this.mask.style.zIndex == 20) ? 21 : 20;
    },

    bindEvent: function() {
        var _this = this;
        var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
        var clickEvtName = device ? 'touchstart' : 'mousedown';
        var moveEvtName = device ? 'touchmove' : 'mousemove';
        if (!device) {
            var isMouseDown = false;
            _this.conNode.addEventListener('mouseup', function(e) {
                e.preventDefault();

                isMouseDown = false;
                var per = _this.getTransparentPercent(_this.maskCtx, _this.width, _this.height);

                if (per >= 80) {//在大于等于80%的时候调用回调函数
                    if (typeof(_this.drawPercentCallback) == 'function') _this.drawPercentCallback();
                }
            }, false);
        } else {
            _this.conNode.addEventListener("touchmove", function(e) {
                if (isMouseDown) {
                    e.preventDefault();
                }
                if (e.cancelable) {
                    e.preventDefault();
                } else {
                    window.event.returnValue = false;
                }
            }, false);
            _this.conNode.addEventListener('touchend', function(e) {
                isMouseDown = false;
                var per = _this.getTransparentPercent(_this.maskCtx, _this.width, _this.height);
                if (per >= 80) {//在大于等于80%的时候调用回调函数
                    if (typeof(_this.drawPercentCallback) == 'function') _this.drawPercentCallback();
                }
            }, false);
        }

        this.mask.addEventListener(clickEvtName, function(e) {
            e.preventDefault();

            isMouseDown = true;

            var x = (device ? e.touches[0].pageX : e.pageX || e.x);
            var y = (device ? e.touches[0].pageY : e.pageY || e.y);

            _this.drawPoint(x, y, isMouseDown);
        }, false);

        this.mask.addEventListener(moveEvtName, function(e) {
            e.preventDefault();

            if (!isMouseDown) return false;
            e.preventDefault();

            var x = (device ? e.touches[0].pageX : e.pageX || e.x);
            var y = (device ? e.touches[0].pageY : e.pageY || e.y);

            _this.drawPoint(x, y, isMouseDown);
        }, false);
    },

    drawLottery: function() {
        if (this.lotteryType == 'image') {
            var image = new Image(),
                _this = this;
            image.onload = function() {
                this.width = _this.width;
                this.height = _this.height;
                _this.resizeCanvas(_this.background, _this.width, _this.height);
                _this.backCtx.drawImage(this, 0, 0, _this.width, _this.height);
                _this.drawMask();
            }
            image.src = this.lottery;
        } else if (this.lotteryType == 'text') {
            this.width = this.width;
            this.height = this.height;
            this.resizeCanvas(this.background, this.width, this.height);
            this.backCtx.save();
            this.backCtx.fillStyle = '#FFF';
            this.backCtx.fillRect(0, 0, this.width, this.height);
            this.backCtx.restore();
            this.backCtx.save();
            var fontSize = 30;
            this.backCtx.font = 'Bold ' + fontSize + 'px Arial';
            this.backCtx.textAlign = 'center';
            this.backCtx.fillStyle = '#F60';
            this.backCtx.fillText(this.lottery, this.width / 2, this.height / 2 + fontSize / 2);
            this.backCtx.restore();
            this.drawMask();
        }
    },

    drawMask: function() {
        if (this.coverType == 'color') {
            this.maskCtx.fillStyle = this.cover;
            this.maskCtx.fillRect(0, 0, this.width, this.height);
            this.maskCtx.globalCompositeOperation = 'destination-out';
        } else if (this.coverType == 'image') {
            var image = new Image(),
                _this = this;
            image.onload = function() {
                _this.resizeCanvas(_this.mask, _this.width, _this.height);

                var android = (/android/i.test(navigator.userAgent.toLowerCase()));

                _this.maskCtx.globalAlpha = 1;//上面一层的透明度，1为不透明
                _this.maskCtx.drawImage(this, 0, 0, this.width, this.height, 0, 0, _this.width, _this.height);

                //---以下一段为在上面一层上写字
                // var fontSize = 50;
                // var txt = '123123';
                // var gradient = _this.maskCtx.createLinearGradient(0, 0, _this.width, 0);
                // gradient.addColorStop("0", "#fff");
                // gradient.addColorStop("1.0", "#000");

                // _this.maskCtx.font = 'Bold ' + fontSize + 'px Arial';
                // _this.maskCtx.textAlign = 'left';
                // _this.maskCtx.fillStyle = gradient;
                // _this.maskCtx.fillText(txt, _this.width / 2 - _this.maskCtx.measureText(txt).width / 2, 100);

                // _this.maskCtx.globalAlpha = 1;

                _this.maskCtx.globalCompositeOperation = 'destination-out';
            }
            image.src = this.cover;
        }
    },

    init: function(lottery, lotteryType) {
        if (lottery) {
            this.lottery = lottery;
            this.lottery.width = this.width;
            this.lottery.height = this.height;
            this.lotteryType = lotteryType || 'image';

            this.vail = true;
        }
        if (this.vail) {
            this.background = this.background || this.createElement('canvas', {
                style: 'position:fixed;top:0;left:0;background-color:transparent;'
            });
        }

        this.mask = this.mask || this.createElement('canvas', {
            style: 'position:fixed;top:0;left:0;background-color:transparent;'
        });
        this.mask.style.zIndex = 20;

        if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) {
            if (this.vail) this.conNode.appendChild(this.background);
            this.conNode.appendChild(this.mask);
            this.bindEvent();
        }
        if (this.vail) this.backCtx = this.backCtx || this.background.getContext('2d');
        this.maskCtx = this.maskCtx || this.mask.getContext('2d');

        if (this.vail) this.drawLottery();
        else this.drawMask();

        var _this = this;
        window.addEventListener('resize', function() {
            _this.width = document.documentElement.clientWidth;
            _this.height = document.documentElement.clientHeight;

            _this.resizeCanvas_w(_this.mask, _this.width, _this.height);
        }, false);
    }
}

另一个zepto.js是库函数文件，可网上自行查找

出来的效果如图

snow_finland

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【html5 canvas】使用Canvas做出橡皮擦效果

html部分 My Canvas 0.1html,body,div,img{ margin:0; padding:0;}a,a:hover{ text-decoration:none;}.background{ width:100%; position:fixed; top:0; left:0;}var canvas = { in
复制链接

扫一扫