2

我正在尝试通过拖动鼠标来绘制一个矩形，基本上按照本教程进行。

但是，我发现如果我在 中指定画布尺寸px，它将不起作用。相反，如果我使用此 html，则效果很好：

<!DOCTYPE html>
<html>

<head>
  <title>drag a rectangle</title>

  <style>
    #cvs {
      width: 500;
      height: 500;
      border: 1px solid #666;
    }
  </style>

  <script src="jquery-1.9.0.js"></script>
</head>

<body>
  <canvas id="cvs"></canvas>

  <script src="main.js"></script>
</body>

</html>

而这个js：

$(document).ready(function() {
    var canvas = document.getElementById('cvs');
    var ctx = canvas.getContext('2d');
    var rect = {};
    var drag = false;

    var mouseDown = function(e) {
        rect.startX = e.pageX - this.offsetLeft;
        rect.startY = e.pageY - this.offsetTop;
        console.log(rect.startX + ' ' + rect.startY);
        drag = true;
    };

    var mouseUp = function(e) {
        drag = false;
    };

    var draw = function() {
        ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
    };

    var mouseMove = function(e) {
        if (drag) {
            rect.w = (e.pageX - this.offsetLeft) - rect.startX;
            rect.h = (e.pageY - this.offsetTop) - rect.startY;
            console.log(rect.w + ' ' + rect.h);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            draw();
        }
    };

    function init() {
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mousemove', mouseMove, false);
    }

    init();
});

它工作正常。但是，如果我在 中指定维度px，即

#cvs {
  width: 500px;
  height: 500px;
  border: 1px solid #666;
}

鼠标位置和矩形不再对齐。此外，视口中的尺寸也不同。px我想这是一个基本问题，但是指定或不指定有什么区别？这对我的拖动矩形行为有何影响？

在最新的 Chrome 上进行了本地测试。

4

1 回答 1

2

要设置画布的大小，请使用画布元素属性width和height.

<canvas width="400" height="300">Not supported</canvas>

当页面加载时，画布大小设置为它的width和height。如果设置style.width和/或style.height设置，画布将缩放以适合这些样式中指定的尺寸。

这是一个例子。

所以现在关于你的问题。正如我在上面写的那样，当你设置style.width和style.height为：

#cvs {
  width: 500px;
  height: 500px;
  border: 1px solid #666;
}

将应用宽度和高度，并且画布将缩放它的大小，因此带有坐标的点(x, y)不会出现在您期望的位置。例如，如果您尝试使用坐标绘制一个点，(500, 500)您可能根本看不到它，因为您的画布坐标系的尺寸比这小。当您没有指定时px，您根本没有提供有效的宽度和高度，并且您的样式无法正确应用，因此您的画布不会缩放，并且一切都按预期工作。

于 2013-01-17T10:23:07.790 回答