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

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

实现这一目标的最佳方式是什么

canvas.addEventListener（“mousemove”，drawPieceAtMouse，false）；
函数drawPieceAtMouse（事件）{
var rect=canvas.getBoundingClientRect（）；
var x=event.clientX-rect.left；
var y=event.clientY-rect.top；
context.save（）；
context.globalAlpha=0.4；
背景。drawImage（玩家[回合]。棋子，x-25，y-25，50，50）；
restore（）；
}

使用此代码

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

---

我收到错误“Uncaught SecurityError:未能在“HtmlCanvaElement”上执行“toDataURL”：可能无法导出受污染的画布。”可能的解决方案是“var img=new Image（）；setAttribute（'crossOrigin'，'anonymous'）；img.src=url；'这并不能修复错误。我可以用程序代码来做一些测试吗？您必须使用

context.clearRect

来清除前面的“游标”。为了使您的设计更有效，您可以使用CSS在游戏画布上放置第二个画布，只需在覆盖的画布上绘制“光标”。您可以告诉第二个画布不侦听鼠标事件，其参数为：

指针事件：无这样您的事件就可以传递到下面的游戏画布。但也许更有效的方法是使用CSS为画布指定自定义光标，而不是在鼠标位置绘制画布。