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

附注，您可以在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);
});

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

1 个答案: