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

Question

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

绘制游戏图像

做到这一点的最佳方法是什么？

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

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