Html Toile Redimensionnement et espace de coordonnées

Question

Note: J'utilise Google Chrome

Actuellement, j'ai cette page de test

http://www.evecakes.com/doodles/canvas_size_issue.htm

Il devrait dessiner un rectangle juste en dessous du curseur de la souris, mais il y a des problèmes de mise à l'échelle vraiment étranges qui l'amènent à un décalage variable. Je pense que c'est parce que l'espace de coordonnées de la toile n'augmente pas avec sa taille html. Y a-t-il un moyen d'augmenter cette taille d'espace de coordonnées?

est ici la fonction javascript

$('#mapc').mousemove(function (event) { 

      var canvas = $('#mapc'); 
      var ctx = canvas[0].getContext('2d'); 

      ctx.fillStyle = "rgb(200,0,0)"; 
      ctx.fillRect(event.clientX, event.clientY, 55, 50); 

      document.title = event.clientX + " --- " + event.clientY; 

     }); 

Answer 1

Définissez les attributs width et height HTML de la toile. En ce moment, il prend sa largeur par défaut et le CSS ne fait que l'étirer, et il semble que ce soit la mise à l'échelle.

A côté note, vous pouvez utiliser this en cas mousemove - il est une référence à l'élément #mapc, de sorte que vous n'aurez pas à interroger les DOM sur tous les mouvements de la souris.

var offset = $('#mapc').offset(); 

$('#mapc').mousemove(function (event) { 

    var ctx = this.getContext('2d'); 

    ctx.fillStyle = "rgb(200,0,0)"; 
    ctx.fillRect(event.pageX - offset.left, event.pageY - offset.top, 1, 1); 
});