使用 HTML5 画布刮掉显示 -- 添加淡出元素

Question

我按照本教程在我的网站上创建了“绘制显示”效果：http://thenewcode.com/1120/Scratch-Off-Reveal-with-HTML5-Canvas。我希望“正面”图像成为此视频资源，并且我还希望“显示”路径（或绘制的每个点）在绘制后经过设定时间后淡出（就像后面的淡出轨迹一样）鼠标），但不知道该怎么做。我尝试在每次调用后重新绘制 img drawDot()，但这似乎只是绘制整个“显示”图像。谢谢！

编辑：添加了将视频置于“前面”的请求

Answer 1

最后，这是我的解决方案：

每次绘制一个点时，设置一个clearDot：

setClearDot(brushPos.x, brushPos.y, CLEARDOT_DELAY_MILLISECONDS)

将在设定的延迟后绘制：

function setClearDot(x, y, delay) {
  setTimeout(() => {
    drawClearDot(x, y)
  }, delay);
}

绘制一个透明点：

function drawClearDot(x, y) {
  const squareX = x - brushRadius
  const squareY = y - brushRadius
  const squareSize = brushRadius * 2
  bridgeCanvas.globalCompositeOperation = "source-over";
  bridgeCanvas.drawImage(img, squareX, squareY, squareSize, squareSize, squareX, squareY, squareSize, squareSize);
}

希望正方形工作得足够好，前两个变量获得点的坐标并将它们变成正方形的左上角。复合操作必须恢复正常（这花了我很多小时才弄清楚……相信我，这很痛苦）。然后我们将彩色图像的一部分绘制回来。

这是我的解决方案的工作片段：

CLEARDOT_DELAY_MILLISECONDS = 1500;

var bridge = document.getElementById("bridge"),
  bridgeCanvas = bridge.getContext('2d'),
  brushRadius = (bridge.width / 100) * 5,
  img = new Image();

if (brushRadius < 50) {
  brushRadius = 50
}

img.onload = function() {
  bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
}
img.loc = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/';
img.filename = 'calgary-bridge-2013.jpg';
if (window.devicePixelRatio >= 2) {
  var nameParts = img.filename.split('.');
  img.src = img.loc + nameParts[0] + "-2x" + "." + nameParts[1];
} else {
  img.src = img.loc + img.filename;
}

function detectLeftButton(event) {
  if ('buttons' in event) {
    return event.buttons === 1;
  } else if ('which' in event) {
    return event.which === 1;
  } else {
    return event.button === 1;
  }
}

function getBrushPos(xRef, yRef) {
  var bridgeRect = bridge.getBoundingClientRect();
  return {
    x: Math.floor((xRef - bridgeRect.left) / (bridgeRect.right - bridgeRect.left) * bridge.width),
    y: Math.floor((yRef - bridgeRect.top) / (bridgeRect.bottom - bridgeRect.top) * bridge.height)
  };
}

function drawDot(mouseX, mouseY) {
  bridgeCanvas.beginPath();
  bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2 * Math.PI, true);
  bridgeCanvas.fillStyle = '#000';
  bridgeCanvas.globalCompositeOperation = "destination-out";
  bridgeCanvas.fill();
}

function drawClearDot(x, y) {
  const squareX = x - brushRadius
  const squareY = y - brushRadius
  const squareSize = brushRadius * 2
  bridgeCanvas.globalCompositeOperation = "source-over";
  bridgeCanvas.drawImage(img, squareX, squareY, squareSize, squareSize, squareX, squareY, squareSize, squareSize);
}

bridge.addEventListener("mousemove", function(e) {
  var brushPos = getBrushPos(e.clientX, e.clientY);
  var leftBut = detectLeftButton(e);
  if (leftBut) {
    drawDot(brushPos.x, brushPos.y);
    setClearDot(brushPos.x, brushPos.y, CLEARDOT_DELAY_MILLISECONDS)
  }
}, false);

bridge.addEventListener("touchmove", function(e) {
  e.preventDefault();
  var touch = e.targetTouches[0];
  if (touch) {
    var brushPos = getBrushPos(touch.pageX, touch.pageY);
    drawDot(brushPos.x, brushPos.y);
    setClearDot(brushPos.x, brushPos.y, CLEARDOT_DELAY_MILLISECONDS)
  }
}, false);

function setClearDot(x, y, delay) {
  setTimeout(() => {
    drawClearDot(x, y)
  }, delay);
}

body {
  margin: 0;
}

#bridge {
  display: block;
  margin: 0 auto;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg');
  background-image: -webkit-image-set(url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg') 1x, url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943-2x.jpg') 2x);
  background-size: cover;
  width: 100%;
  max-width: 750px;
  height: auto;
  cursor: crosshair;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png) 53 53, crosshair;
}

#bridgeContainer {
  text-align: center;
  font-family: Avenir, sans-serif;
}

#bridgeContainer figcaption {
  margin-top: 2rem;
}

<figure id="bridgeContainer">
  <canvas id="bridge" width="750" height="465"></canvas>
  <figcaption>Downtown Calgary in 2013 and 1943; mouse down or touch on photo to reveal</figcaption>
</figure>

这花费的时间比我愿意承认的要长