簡體   English   中英

在畫布上使用JavaScript在鼠標移動上繪制透明圖像

[英]Drawing a transparent image on mouse movement with JavaScript on a canvas

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

使用此代碼

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM