使用动画元素在另一个图像上绘制图像答案

【问题标题】：Draw an image on top of another image with an animated element使用动画元素在另一个图像上绘制图像
【发布时间】：2017-01-26 07:29:15
【问题描述】：

最初我想做的是在清晰的同一图像上放置一个模糊图像。然后有另一个元素（div 框）在显示清晰图像的模糊图像上进行动画处理。从而给出像一副眼镜一样的效果。现在我知道这可以通过 html5 画布实现，但是我对这个 api 以及如何实现它并不是很了解。我正在努力做两件事。

首先将被删除的灰色fillColor 换掉，这样您就可以看到它后面的图像，以及模糊的图像。现在我尝试执行 drawImage() 函数。但似乎无法让它与我拥有的当前代码一起工作。任何建议或示例将不胜感激。

第二件事是让动画 div 执行“擦除”而不是用户执行鼠标按下功能。

第三也是最后一件事（更担心只是弄清楚前两个），是在 div 移动后图像返回到重新模糊图像。

我也愿意接受更好的方法。我非常感谢您花时间帮助自己。

animateLense();

function animateLense() {
  $("#lense").animate({
    left: 200,
    top: 150
  }, 2000 );
}

(function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element


    function createCanvas(parent, width, height) {
      var canvas = {};
      canvas.node = document.createElement('canvas');
      canvas.context = canvas.node.getContext('2d');
      canvas.node.width = width || 100;
      canvas.node.height = height || 100;
      parent.appendChild(canvas.node);
      return canvas;
    }

    function init(container, width, height, fillColor) {
      var canvas = createCanvas(container, width, height);
      var ctx = canvas.context;

      // define a custom fillCircle method
      ctx.fillCircle = function(x, y, radius, fillColor) {
        this.fillStyle = fillColor;
        this.beginPath();
        this.moveTo(x, y);
        this.arc(x, y, radius, 0, Math.PI * 2, false);
        this.fill();
      };

      ctx.clearTo = function(fillColor) {
        ctx.fillStyle = fillColor;
        ctx.fillRect(0, 0, width, height);
      };
      ctx.clearTo(fillColor || "#ddd"); 

      // bind mouse events
      canvas.node.onmousemove = function(e) {
        if (!canvas.isDrawing) {
          return;
        }
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var radius = 10; // or whatever
        var fillColor = '#ff0000';
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillCircle(x, y, radius, fillColor);  
      };
      canvas.node.onmousedown = function(e) {
        canvas.isDrawing = true;
      };
      canvas.node.onmouseup = function(e) {
        canvas.isDrawing = false;
      };
      // bind mouse end

    }

    var container = document.getElementById('canvas');
    init(container, 300, 250, '#ddd');

  })();

.canvas {
      position: absolute;
      width: 300px;
      height: 250px;
      left: 0px;
      top: 0px;
      background: url("http://www.atlantisbahamas.com/media/Things%20To%20Do/Water%20Park/Beaches/Gallery/waterpark_covebeach.jpg");
      background-size: 300px, 250px
}

.lense {
  position: absolute;
  height: 50px;
  width: 50px;
  border: 2px black solid;
  top: 0;
  left: 0;
}

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="canvas" id="canvas">
    <div class="lense" id="lense"></div>
  </div>
</body>
</html>

【问题讨论】：

标签： javascript css html canvas html5-canvas

【解决方案1】：

只需在同一位置绘制两张图像。

在第一个之上绘制第二个：

ctx.globalAlpha = 0.5; // Set to animated value

动画 globalAlpha。

注意：您不能使用 HTML 元素在

【讨论】：