Javascript 在px中指定宽度或不更改画布行为_Javascript_Css_Html_Canvas

Javascript 在px中指定宽度或不更改画布行为

javascript css html canvas

Javascript 在px中指定宽度或不更改画布行为,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我正试图通过拖动鼠标来绘制一个矩形，基本上遵循这个但是，我发现如果我在px中指定画布维度，它将不起作用。相反，如果我使用此html，则效果很好： <!DOCTYPE html> <html> <head> <title>drag a rectangle</title> <style> #cvs { width: 500; height: 500; border: 1p

我正试图通过拖动鼠标来绘制一个矩形，基本上遵循这个

但是，我发现如果我在

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>

它很好用。但是，如果我在

px

中指定尺寸，即

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

鼠标位置和矩形不再对齐。此外，视口中的标注也不同。我想这是一个基本问题，但是指定

px

与不指定px有什么区别？这会如何影响我的拖动矩形行为

在最新的Chrome浏览器上进行本地测试。

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

width

和

height

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

宽度和高度将适用，画布将缩放其大小，因此坐标为

（x，y）

的点不会出现在您期望的位置。例如，如果您尝试使用坐标

（500500）

绘制一个点，您可能根本看不到它，因为画布坐标系的尺寸小于该尺寸。如果您没有指定

px

，您就无法提供有效的宽度和高度，而且您的样式也没有正确应用，因此您的画布没有按预期缩放，一切正常。

谢谢。但我的问题是关于

400px

和

之间的区别，以及这对我的鼠标拖动行为有何影响。因此，如果你缩放坐标太大，一切都会很好…除了模糊效果（或缺陷…）。最好不要在画布中使用

style.width\height

。

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

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