两张图片实现擦除效果(canvas)

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量772 收藏 1
点赞数
分类专栏： CSS) 文章标签： 前端
原文链接：https://www.cnblogs.com/axes/p/3850309.html
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0;"
    />
    <title>橡皮擦效果</title>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .view {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000 url("./image/1.jpg") no-repeat center center;
        background-size: auto 100%;
        backface-visibility: hidden;
        overflow: hidden;
      }
      #cas {
        opacity: 1;
        -webkit-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
      }

      .noOp {
        opacity: 0 !important;
      }
    </style>
  </head>
  <body>
    <div class="view">
      <div class="box" id="bb">
        <canvas id="cas"></canvas>
      </div>
    </div>

    <script charset="utf-8">
      var canvas = document.getElementById("cas"),
        ctx = canvas.getContext("2d");
      var x1,
        y1,
        a = 30,
        timeout,
        totimes = 100,
        distance = 30;
      var saveDot = [];

      var canvasBox = document.getElementById("bb");

      canvas.width = canvasBox.clientWidth;
      canvas.height = canvasBox.clientHeight;

      var img = new Image();
      img.src = "./image/2.jpg";
      img.onload = function () {
        var w = (canvas.height * img.width) / img.height;
        ctx.drawImage(img, (canvas.width - w) / 2, 0, w, canvas.height);
        tapClip();
      };

      function getClipArea(e, hastouch) {
        var x = hastouch ? e.targetTouches[0].pageX : e.clientX;
        var y = hastouch ? e.targetTouches[0].pageY : e.clientY;
        var ndom = canvas;

        while (ndom.tagName !== "BODY") {
          x -= ndom.offsetLeft;
          y -= ndom.offsetTop;
          ndom = ndom.parentNode;
        }

        return {
          x: x,
          y: y,
        };
      }

      //通过修改globalCompositeOperation来达到擦除的效果
      function tapClip() {
        var hastouch = "ontouchstart" in window ? true : false,
          tapstart = hastouch ? "touchstart" : "mousedown",
          tapmove = hastouch ? "touchmove" : "mousemove",
          tapend = hastouch ? "touchend" : "mouseup";

        var area;
        var x2, y2;

        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        ctx.lineWidth = a * 2;
        ctx.globalCompositeOperation = "destination-out";

        window.addEventListener(tapstart, function (e) {
          clearTimeout(timeout);
          e.preventDefault();

          area = getClipArea(e, hastouch);

          x1 = area.x;
          y1 = area.y;

          drawLine(x1, y1);

          this.addEventListener(tapmove, tapmoveHandler);

          this.addEventListener(tapend, function () {
            this.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 += distance) {
                for (var y = 0; y < imgData.height; y += distance) {
                  var i = (y * imgData.width + x) * 4;
                  if (imgData.data[i + 3] > 0) {
                    dd++;
                  }
                }
              }
              if (
                dd /
                  ((imgData.width * imgData.height) / (distance * distance)) <
                0.4
              ) {
                canvas.className = "noOp";
              }
            }, totimes);
          });

          function tapmoveHandler(e) {
            clearTimeout(timeout);

            e.preventDefault();

            area = getClipArea(e, hastouch);

            x2 = area.x;
            y2 = area.y;

            drawLine(x1, y1, x2, y2);

            x1 = x2;
            y1 = y2;
          }
        });
      }

      function drawLine(x1, y1, x2, y2) {
        //		ctx.save();
        //		if(arguments.length==2){
        //			saveDot = [[x1, y1]];
        //			ctx.beginPath();
        //			ctx.arc(x1, y1, a, 0, 2 * Math.PI);
        //			ctx.fill();
        //		}else {
        //			saveDot.push([x2,y2]);
        //			if(saveDot.length >= 3){
        //				ctx.beginPath();
        //				ctx.moveTo(saveDot[0][0], saveDot[0][1]);
        //				ctx.quadraticCurveTo(saveDot[1][0], saveDot[1][1], saveDot[2][0], saveDot[2][1]);
        //				ctx.stroke();
        //				saveDot = [saveDot.pop()];
        //			}
        //		}
        //		ctx.restore();

        ctx.save();
        ctx.beginPath();
        if (arguments.length == 2) {
          ctx.arc(x1, y1, a, 0, 2 * Math.PI);
          ctx.fill();
        } else {
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.stroke();
        }
        ctx.restore();
      }

      //使用clip来达到擦除效果
      function otherClip() {
        var hastouch = "ontouchstart" in window ? true : false,
          tapstart = hastouch ? "touchstart" : "mousedown",
          tapmove = hastouch ? "touchmove" : "mousemove",
          tapend = hastouch ? "touchend" : "mouseup";

        var area;

        canvas.addEventListener(tapstart, function (e) {
          clearTimeout(timeout);
          e.preventDefault();

          area = getClipArea(e, hastouch);

          x1 = area.x;
          y1 = area.y;

          ctx.save();
          ctx.beginPath();
          ctx.arc(x1, y1, a, 0, 2 * Math.PI);
          ctx.clip();
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          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 += distance) {
                for (var y = 0; y < imgData.height; y += distance) {
                  var i = (y * imgData.width + x) * 4;
                  if (imgData.data[i + 3] > 0) {
                    dd++;
                  }
                }
              }
              if (
                dd /
                  ((imgData.width * imgData.height) / (distance * distance)) <
                0.4
              ) {
                canvas.className = "noOp";
              }
            }, totimes);
          });

          function tapmoveHandler(e) {
            e.preventDefault();
            area = getClipArea(e, hastouch);
            x2 = area.x;
            y2 = area.y;

            var asin = a * Math.sin(Math.atan((y2 - y1) / (x2 - x1)));
            var acos = a * Math.cos(Math.atan((y2 - y1) / (x2 - x1)));
            var x3 = x1 + asin;
            var y3 = y1 - acos;
            var x4 = x1 - asin;
            var y4 = y1 + acos;
            var x5 = x2 + asin;
            var y5 = y2 - acos;
            var x6 = x2 - asin;
            var y6 = y2 + acos;

            ctx.save();
            ctx.beginPath();
            ctx.arc(x2, y2, a, 0, 2 * Math.PI);
            ctx.clip();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.restore();

            ctx.save();
            ctx.beginPath();
            ctx.moveTo(x3, y3);
            ctx.lineTo(x5, y5);
            ctx.lineTo(x6, y6);
            ctx.lineTo(x4, y4);
            ctx.closePath();
            ctx.clip();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.restore();

            x1 = x2;
            y1 = y2;
          }
        });
      }
    </script>
  </body>
</html>

转自:https://www.cnblogs.com/axes/p/3850309.html

前端交互仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片利用canvas去除背景，抠图
HAI_GUI的博客
07-19 1616
图片去除背景
79-图片擦除(纯代码)
blaze747
01-22 609
//  ViewController.m //  图片擦除(纯代码) //  如果想要要通过storyboard拖拽方式操作，拖两个imageview //  其中用于做擦除操作的要连线，并给其拖一个手指移动的手势 #import "ViewController.h" @interface ViewController ()  //保存用于做擦除操作的图片 @property
Canvas的擦除操作（八）
搜索微信公众号（airX嵌入式）获取更多知识
12-09 2324
Canvas的擦除主要用于你画错了，可以重新擦掉，或者清除。   擦除函数 context.clearRect(x,y，width，height) 参数x，y表示擦除的远点坐标， width表示擦除矩形的宽， height则表示高 现在画个圆，然后把圆的下半部分擦掉，代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head...
canvas擦除功能—圆形橡皮擦
weixin_44434938的博客
03-26 1318
canvas擦除功能—圆形橡皮擦
使用canvas实现擦除效果
weixin_30485799的博客
04-19 378
w3c关于canvas的定义： HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 html代码: <div class="container"> ...
js canvas实现擦除动画
10-21
在这个场景中，我们关注的是如何使用Canvas来实现擦除动画，尤其是在移动设备上将一张图片擦掉并显示另一张图片。实现这一功能的核心在于理解Canvas的绘图操作和`globalCompositeOperation`属性。 首先，Canvas是一...
html5 canvas烟雾消散图片切换动画特效
06-10
在这个“html5 canvas烟雾消散图片切换动画特效”中，我们看到的是利用Canvas元素来实现的一种视觉效果，它通过烟雾消散的动画过渡，巧妙地在两张图片之间进行切换。 首先，我们要理解Canvas的基本使用。在HTML中，...
html5 canvas手指滑动手机刮刮乐效果
09-08
为了实现刮刮乐效果，我们需要在用户手指滑动时擦除一部分图像。当用户触摸屏幕时，我们可以监听`touchstart`事件，记录初始触摸位置。在`touchmove`事件中，获取当前触摸位置，并在这两点之间进行擦除操作。使用`...
基于zepto实现html5刮刮卡效果.zip
02-12
5. **图像处理**：为了实现刮刮卡效果，通常需要两张图像，一张是完整的背景图像，另一张是覆盖在上面的涂层图像。涂层图像可以通过透明度或者特定颜色来实现。JavaScript会根据用户的刮擦行为，逐渐揭示底层的背景...
jQuery擦除插件eraser使用方法详解
10-15
通过CSS定位，这两张图片会重叠在一起，而灰色图片（cover）位于彩色图片（real）之上，通过调整z-index来实现。 ### 使用方法 1. **引入文件** 在HTML文档中，首先需要引入jQuery库和jQuery.eraser插件的...
canvas实现橡皮擦效果擦去图片上的文字
qq_17859117的博客
04-01 637
PS：网上有很多资料，但要么是不全，要么是存在一些错误，这里提供一个一键复制完整版。canvas实现橡皮擦效果擦去图片上的文字。
canvas 擦除动画_使用canvas实现擦除效果
weixin_31775717的博客
02-23 508
w3c关于canvas的定义：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。html代码:hello world设置一个父容器，里面包括canvas标签，用于遮罩，content用于显示擦除遮罩层之后的内容ps：设置canvas元素需要加上width和he...
canvas连线
lishangua的专栏
08-20 1173
.bj{width: 100%;height: 100%;background-color: red;position: relative;z-index: 1;}           #canvas{position: absolute;z-index: 2;}                                                   
java做橡皮擦效果_基于canvas剪辑区域功能实现橡皮擦效果
weixin_36438989的博客
02-26 160
这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下这是基础结构 没什么好说的?Document*{padding: 0;margin: 0}a{text-decoration: none}img{border: none}ul,ol{list-style: none}br{font-size: 0;line-height: 0;font-...
canvas学习（十三）：clip之图形剪辑
总有一天，你的日积月累，会成为别人的望尘莫及
08-03 696
clip方法描述： canvas本来是一个大的画布，clip方法用来从原始画布中剪切任意形状和尺寸，但是一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内而不能再访问画布上的其他区域。   简单实例1：圆形的探照灯 效果如图： 代码如下： var circular ={x:300,y:300,radius:150,vx:Math.random()*5+5,vy:Math...
Canvas 橡皮擦效果
XXHolic
02-07 711
引子 解决了第一个问题图像灰度处理之后，接着就是做擦除的效果。 Origin My GitHub 思路 一开始想到 Canvas 的画布可以相互覆盖的特性，彩色原图作为背景，灰度图渲染到 Canvas 画布上，然后手指滑动的时候，把接触的部分清除掉，就显示出了背景图。关键的部分是怎么清除画布上已有图像，查询资料发现有两种方式： 使用 clearRect 方法，会把指定范围所有像素变成透明，并...
HTML5 Canvas实现图片擦除效果
Herbert的专栏
08-03 4186
HTML5 Canvas实现图片擦除效果，该效果主要应用了canvas的globalCompositeOperation 属性值实现。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 1009
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
canvas 画两张图片
05-30
好的，让我们来画两张图片。首先，你需要在HTML页面中添加一个canvas元素： ```html <canvas id="myCanvas" width="500" height="500"></canvas> ``` 然后，你可以使用JavaScript来获取canvas元素，并在canvas上绘制两张图片： ```javascript // 获取canvas元素 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 创建两个图片对象 var img1 = new Image(); img1.src = "image1.jpg"; var img2 = new Image(); img2.src = "image2.jpg"; // 等待图片加载完成后再进行绘制 img1.onload = function() { // 绘制第一张图片 ctx.drawImage(img1, 0, 0); img2.onload = function() { // 绘制第二张图片 ctx.drawImage(img2, 250, 0); } } ``` 这段代码会在canvas上绘制两张图片，第一张图片在左侧，第二张图片在右侧，它们之间有一些空白的空间。你可以根据需要调整图片的位置和尺寸。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值