[英]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.