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

html部分

My Canvas 0.1

html,body,div,img{

margin:0;

padding:0;

}

a,a:hover{

text-decoration:none;

}

.background{

width:100%;

position:fixed;

top:0;

left:0;

}

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

});

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是库函数文件，可网上自行查找

出来的效果如图