Question

我正在尝试通过拖动鼠标绘制一个矩形，基本上遵循此tutorial。

但是，我发现如果我在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上进行本地测试。

Answer 1

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

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

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

Here就是一个例子。

现在关于你的问题。如上所述，当您将style.width和style.height设置为：

时

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

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

在px中指定宽度是否更改画布行为

1 个答案: