如何用光标擦除图像以显示另一个图像？答案

【问题标题】：How do I erase image with cursor to reveal another image?如何用光标擦除图像以显示另一个图像？
【发布时间】：2021-04-23 23:07:33
【问题描述】：

好的，所以我知道有一个与此类似的帖子 (javascript erase image with cursor)，但我已经看到它和答案中链接的代码，我想知道是否有办法编辑 the code 以便改为擦除纯色以显示图像，我可以擦除图像以显示不同的图像。

这是来自网站的代码/标记。

HTML

<div id="canvas"></div>

CSS

#canvas {
background:url(http://www.topscratchcards.com/images/games/888ladies/scratchcard-winning-ticket.jpg);
width: 531px;
height: 438px;
}

JAVASCRIPT

(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 = 20; // 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;
};
}

var container = document.getElementById('canvas');
init(container, 531, 438, '#ddd');

})();

我不知道是否有办法编辑此代码以实现我想要的 - 如果没有，那么我可以使用任何替代方法/代码吗？

【问题讨论】：

标签： javascript html css image

【解决方案1】：

还有一个选择。

您可以使用.innerHTML 来解决您的问题。

例如。取一个名为 mydiv 的 div

< img id="myImage" 
    src="http://www.w3schools.com/js/pic_bulboff.gif" 
    onmouseover="document.getElementById('myImage').src='http://www.w3schools.com/js/pic_bulbon.gif'"
    onmouseout="document.getElementById('myImage').src='http://www.w3schools.com/js/pic_bulboff.gif'" 
>

理想情况下，这可以解决您的目的

【讨论】：

谢谢你的回答。但这不会立即更改图像，而是用光标擦除前面的图像（少量）

【解决方案2】：

$("svg").on("mousemove", function (e) {
  var x = e.pageX - $("#mySvg").offset().left;
  var y = e.pageY - $("#mySvg").offset().top;
  // console.log(x);
  // console.log(y);
  $(".a").attr("cx", x).attr("cy", y);
});

#mySvg {
  width: 531px;
  height: 438px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="mySvg">
        <clippath id="clip">
            <circle cx="-20" cy="-20" r="80" class="a" />
        </clippath>

        <image preserveAspectRatio="xMidYMin slice"
            href="https://www.gannett-cdn.com/presto/2021/03/02/USAT/a51266de-f2dc-404c-a46a-bcca17c496eb-matrix-reloaded-keanu-reeves.png?width=660&height=372&fit=crop&format=pjpg&auto=webp"
            class="one" />

        <image preserveAspectRatio="xMidYMin slice" href="https://static.dw.com/image/56167112_303.jpg"
            clip-path="url(#clip)" />
    </svg>

【讨论】：