java 橡皮擦_js 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(tagNa