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