HTML画布大小调整和坐标空间

Question

注：我使用谷歌浏览器

目前我有这个测试页面

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

它应该画下方的鼠标光标的矩形，但有一些真正奇怪的缩放问题导致它以不同的偏移量绘制。我认为这是因为画布坐标空间不随其html大小而增加。有没有办法增加坐标空间的大小？

这里的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

设置画布的width和height HTML属性。现在，它假定它的默认宽度和CSS只是伸展它，它看起来好像是缩放。

一个侧面说明，您可以在mousemove事件中使用this - 它是对#mapc元素的引用，因此您不必在每次鼠标移动时查询DOM。

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