0

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

  • 每次清除画布时，如何清除附加图像的痕迹并仍然保持我的自定义光标 (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>
4

3 回答 3

2

是的，这个真的很难用谷歌搜索。我最喜欢的答案：https ://stackoverflow.com/a/2142549/607407

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" />

于 2015-11-16T15:29:37.557 回答
1

定制的画布光标 - 有效！:)

<!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>
于 2015-11-16T15:41:08.040 回答
0

您可以很容易地为此使用 css，正如评论中所述，不要重新发明轮子，javascript 仍然比运行浏览器的本机客户端慢很多。查看此https://davidwalsh.name/css-custom-cursor，您可以使用它canvas:hover来制作它，以便在鼠标悬停时使用您的自定义光标。

于 2015-11-16T15:27:09.960 回答