这篇文章主要介绍了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橡皮擦刮卡效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
