在画布上使用 JavaScript 在鼠标移动时绘制透明图像答案

【问题标题】：Drawing a transparent image on mouse movement with JavaScript on a canvas在画布上使用 JavaScript 在鼠标移动时绘制透明图像
【发布时间】：2016-02-11 23:19:23
【问题描述】：

由 SVG 图像组成的棋盘游戏在 HTML 画布中绘制。我想在鼠标悬停在画布上时用鼠标移动透明的游戏块图像。我想这样做，而不必每次移动鼠标时都遍历游戏矩阵。我能想到的唯一方法如下所示；但是，绘制图像的最后一个位置仍然存在，导致了这种效果：

Draw game piece image

最好的方法是什么？

canvas.addEventListener("mousemove", drawPieceAtMouse, false);

function drawPieceAtMouse(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  context.save();
  context.globalAlpha = 0.4;
  context.drawImage(players[turn].piece, x-25, y-25, 50, 50);
  context.restore();
}

【问题讨论】：

您必须使用context.clearRect 清除之前的“光标”。为了让您的设计更有效率，您可以使用 CSS 在游戏画布上放置第二个画布，然后在该覆盖画布上绘制“光标”。您可以使用以下命令告诉第二个画布不要监听鼠标事件：pointer-events:none;，这样您的事件就会传递到下面的游戏画布。 但也许更有效的方法是使用 CSS 为画布分配自定义光标，而不是在鼠标位置绘制画布。

标签： javascript html canvas html5-canvas

【解决方案1】：

使用此代码

canvas.addEventListener("mousemove", drawPieceAtMouse, false);


var canvasimg = new Image();
function updatecanvasimage(){
canvasimg = new Image();
canvasimg.src = canvas.toDataURL("image/png");
}
updatecanvasimage()//call this when you want changes to stay on the canvas

function drawPieceAtMouse(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
context.drawImage(canvasimg,0 , 0,canvas.width,canvas.height);
context.globalAlpha = 0.4;
context.drawImage(players[turn].piece, x-25, y-25, 50, 50);
}

【讨论】：

我收到错误“未捕获的 SecurityError：无法在 'HTMLCanvasElement' 上执行 'toDataURL'：可能无法导出受污染的画布。”一个可能的解决方案是 'var img = new Image(); img.setAttribute('crossOrigin', '匿名'); img.src = 网址;'这并不能修复错误。
我可以给程序代码做一些测试