javascript - 如何用光标删除图像以显示另一张图像？

Question

好的，所以我知道有一个与此类似的帖子( 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');

})();

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

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

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