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

Question

注意：我使用的是Google Chrome浏览器

目前我有此测试页

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只是在拉伸它，并且看起来好像在缩放。

附带一提，你可以使用this在mousemove事件-这是一个参考#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);
});