JavaScript canvas - clearImage() - canvas.getBoundingClientRect

Я не могу очистить изображение курсора (canvas.getBoundingClientRect) после перемещения курсора по элементу 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>
Источник

3 ответа

Решение

Да, это было действительно трудно гуглить. Ответ мне больше всего нравится: /questions/6130020/kak-ochistit-holst-dlya-pererisovki/6130058#6130058

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

Snippet:

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

Источник

Персонализированный курсор холста - работает!:)

<!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>
Источник

Вы можете просто использовать css для этого очень легко, так как вышеизложенное в комментариях не изобретает колесо, javascript все еще намного медленнее, чем собственный клиент, на котором работает браузер. проверьте это https://davidwalsh.name/css-custom-cursor и вы можете использовать canvas:hover чтобы сделать так, чтобы он использовал ваш собственный курсор, когда мышь находится над ним.

Источник
Другие вопросы по тегам