JS实现canvas仿ps橡皮擦刮卡效果详解

目录

效果演示：

主要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 的资料请关注脚本之家其它相关文章！

• js canvas实现橡皮擦效果
• JavaScript canvas实现刮刮乐案例