JavaScript canvas - clearImage() - canvas.getBoundingClientRect

Question

光标移过canvas元素后无法清除光标图像（canvas.getBoundingClientRect）！我在 canvas 上留下了一串附加图像。

如何清除附加图像的踪迹并在每次清除 canvas 时仍保持自定义光标 (canvas.getBoundingClientRect) 可见？

查看我的代码：

<script>
window.addEventListener("load", CanvasProperties, false);

//Global Variables
var canvas, context;     

// Canvase Element - 2D Properties
function CanvasProperties(){
   canvas = document.getElementById("canvas");        
   context = canvas.getContext("2d");        
   window.addEventListener("mousemove", CustomCursor, false);};

// Customized Cursor for Game's Canvas    
   function CustomCursor(e){
   var canvasRect = canvas.getBoundingClientRect(); 
   var xPosition = e.clientX - 5 - canvasRect.left;
   var yPosition = e.clientY - 5 - canvasRect.top;
   var img = new Image();
   img.src = "hero.png";
   context.drawImage(img, xPosition, yPosition, 80, 80);};

</script>

Answer 1

你可以很容易地使用css，正如上面评论中所说，不要重新发明轮子，javascript仍然比本地客户端浏览器慢很多运行开启。看看这个 https://davidwalsh.name/css-custom-cursor，你可以使用 canvas:hover 来制作它，这样只要鼠标悬停在它上面，它就会使用你的自定义光标。

Answer 2

是的，这个是 really hard to google. The answer I like the best:

function CustomCursor(e){
   var canvasRect = canvas.getBoundingClientRect(); 

   var img = new Image();
   img.src = "https://crossorigin.me/https://www.gravatar.com/avatar/5a061a72feb5b6580dadd5dcbc92d3b5?s=64&d=identicon&r=PG";
   var xPosition = e.clientX - 5 - canvasRect.left-img.naturalWidth/2;
   var yPosition = e.clientY - 5 - canvasRect.top- img.naturalHeight/2;

   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(img, xPosition, yPosition, 80, 80);
};

片段：

//Global Variables - which is wrong
var canvas, context;     

// Canvase Element - 2D Properties
function CanvasProperties(){
   canvas = document.getElementById("canvas");   
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   context = canvas.getContext("2d");        
   window.addEventListener("mousemove", CustomCursor, false);
}
// Customized Cursor for Game's Canvas    
function CustomCursor(e){
   var canvasRect = canvas.getBoundingClientRect(); 

   var img = new Image();
   img.src = "https://crossorigin.me/https://www.gravatar.com/avatar/5a061a72feb5b6580dadd5dcbc92d3b5?s=64&d=identicon&r=PG";
   var xPosition = e.clientX - 5 - canvasRect.left-img.naturalWidth/2;
   var yPosition = e.clientY - 5 - canvasRect.top- img.naturalHeight/2;
   
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(img, xPosition, yPosition, 80, 80);
};

CanvasProperties();

<canvas width="300" height="300" id="canvas" />

Answer 3

自定义 Canvas 光标 - 有效！ :)

<!DOCTYPE html>
<html>

<body id="body" style="background-color:gray;">

<canvas id="canvas" width="600" height="400" style="background-color:white;  
display:block; margin:1 auto;"> </canvas>


<script>
window.addEventListener("load", CanvasProperties, false);

//JavaScript Variables
  var canvas, context;     

// Canvase Element - 2D Properties
function CanvasProperties(){
   canvas = document.getElementById("canvas");   

   context = canvas.getContext("2d");        
   window.addEventListener("mousemove", CustomCursor, false);
}

// Customized Cursor for Game's Canvas    
function CustomCursor(e){
   var canvasRect = canvas.getBoundingClientRect(); 

  var img = new Image(); img.src = "hero.png";
   var xPosition = e.clientX - 5 - canvasRect.left;
   var yPosition = e.clientY - 5 - canvasRect.top;

  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(img, xPosition, yPosition, 80, 80);
};

 CanvasProperties();
</script>

</body>
</html>

JavaScript canvas - clearImage() - canvas.getBoundingClientRect

JavaScript canvas - clearImage() - canvas.getBoundingClientRect

html

javascript

canvas

getboundingclientrect