效果演示:
主要js代码实现
<div class="box" id="bb">
<canvas id="cas" width="1366" height="651"></canvas>
</div>
<script type="text/javascript" charset="utf-8">
var canvas = document.getelementbyid("cas"),
ctx = canvas.getcontext("2d");
var x1, y1, a = 30,
timeout, totimes = 100,
jiange = 30;
canvas.width = document.getelementbyid("bb").clientwidth;
canvas.height = document.getelementbyid("bb").clientheight;
var img = new image();
img.src = "sha.jpg";
img.onload = function() {
ctx.drawimage(img, 0, 0, canvas.width, canvas.height)
//ctx.fillrect(0,0,canvas.width,canvas)
tapclip()
}
//通过修改globalcompositeoperation来达到擦除的效果
function tapclip() {
var hastouch = "ontouchstart" in window ? true : false,
tapstart = hastouch ? "touchstart" : "mousedown",
tapmove = hastouch ? "touchmove" : "mousemove",
tapend = hastouch ? "touchend" : "mouseup";
ctx.linecap = "round";
ctx.linejoin = "round";
ctx.linewidth = a * 2;
ctx.globalcompositeoperation = "destination-out";
canvas.addeventlistener(tapstart, function(e) {
cleartimeout(timeout)
e.preventdefault();
x1 = hastouch ? e.targettouches[0].pagex : e.clientx - canvas.offsetleft;
y1 = hastouch ? e.targettouches[0].pagey : e.clienty - canvas.offsettop;
ctx.save();
ctx.beginpath()
ctx.arc(x1, y1, 1, 0, 2 * math.pi);
ctx.fill();
ctx.restore();
canvas.addeventlistener(tapmove, tapmovehandler);
canvas.addeventlistener(tapend, function() {
canvas.removeeventlistener(tapmove, tapmovehandler);
timeout = settimeout(function() {
var imgdata = ctx.getimagedata(0, 0, canvas.width, canvas.height);
var dd = 0;
for (var x = 0; x < imgdata.width; x += jiange) {
for (var y = 0; y < imgdata.height; y += jiange) {
var i = (y * imgdata.width + x) * 4;
if (imgdata.data[i + 3] > 0) {
dd++
}
}
}
if (dd / (imgdata.width * imgdata.height / (jiange * jiange)) < 0.4) {
canvas.classname = "noop";
}
}, totimes)
});
canvas.addeventlistener(tapmove, tapmovehandler);
canvas.addeventlistener(tapend, function() {
canvas.removeeventlistener(tapmove, tapmovehandler);
timeout = settimeout(function() {
var imgdata = ctx.getimagedata(0, 0, canvas.width, canvas.height);
var dd = 0;
for (var x = 0; x < imgdata.width; x += jiange) {
for (var y = 0; y < imgdata.height; y += jiange) {
var i = (y * imgdata.width + x) * 4;
if (imgdata.data[i + 3] > 0) {
dd++
}
}
}
}, totimes)
});
}
</script>
<script type="text/javascript">
window.settimeout('countdown()', 100);
// end
</script>
以上就是js实现canvas仿ps橡皮擦刮卡效果详解的详细内容,更多关于js 的资料请关注其它相关文章!