Question

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

首先要更改被删除的灰色fillColor，以便您可以看到背后的图像，图像模糊。现在我试图执行drawImage（）函数。但似乎无法使用我现有的代码。任何建议或例子将不胜感激。

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

第三件也是最后一件事（更让人担心的只是让前两个想通），将是图片在div移动后返回到reblur图像。

我也对更好的方法有所了解。我非常感谢花时间帮助自己。

＆＃13;

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');

  })();

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

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

Animate globalAlpha。

注意：您不在＆lt; canvas＆gt;内绘制图像。使用HTML元素。你必须通过JavaScript加载它们并使用drawImage方法。

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

1 个答案: