Question

好的，所以我知道有一个类似的帖子（javascript erase image with cursor），但我已经看到它和答案中链接的代码，我想知道是否有办法编辑{{3}因此，我可以擦除图像以显示不同的图像，而不是擦除纯色来显示图像。

这是网站的代码/标记。

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

})();

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

Answer 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'" 
>

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

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

如何用光标擦除图像以显示另一张图像？

2 个答案: