Javascript HTML5画布笔划（）厚且模糊

我试图允许用户在画布上绘制一个矩形（如选择框）。我得到了一些荒谬的结果，但我注意到，即使只是尝试引用我的代码，我也会得到大量模糊的行，不知道为什么

---

它的主机在。javascript是内联的，因此您可以检查它。我正在使用jQuery简化鼠标坐标的获取。

出于某种原因，您的画布被拉伸了。因为您将其css属性

width

设置为

100%

，所以它从某种本机大小扩展了它。这是使用css

width

属性和

标记上的

width

属性之间的区别。您可能想尝试使用一点javascript来填充视口（）：

---

您没有以像素表示画布大小，因此它是按比例放大的。这里是300x150。尝试设置宽度、高度

如果使用css设置画布高度和宽度，而不是在画布元素中设置高度和宽度，则会出现模糊问题

<style>
  canvas { height: 800px; width: 1200px; }      WRONG WAY -- BLURRY LINES
</style>

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES

画布{高度：800px；宽度：1200px；}方向错误--线条模糊
正确的方向--尖锐的线条

在视网膜显示器上，您还需要缩放（除了可接受的答案外）：

---

我发现我的内容模糊的原因是内联宽度和CSS宽度之间有一点差异

我有两个内联宽度/高度参数和css宽度/高度分配给我的画布，因为我需要保持其物理尺寸静态，同时增加视网膜屏幕的内联尺寸

---

如果您遇到与我类似的情况，请检查您的情况是否相同。

这些评论中提到的css大小调整问题是正确的，但另一个可能导致线条模糊的更微妙的事情是在划线之前忘记调用

context.beginPath（）

。如果不调用此函数，您仍然会得到一条线，但它不会被平滑，这使得该线看起来像一系列步骤。

我的方法是在css中将canvas元素设置为宽度和高度，然后设置canvas.width=canvas.clientWidth和canvas.height=canvas.clientHeight

var canvas =  document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");

---

链接死了。我的输出也变得粗而模糊，我将宽度和高度设置为%或vw或vh。在我的例子中，通过将直接px设置为宽度和高度是有效的。这将增加画布的尺寸。这个注释确实帮助了我，但有几个错误。这是为我工作的代码版本。由于使用了getElementById，因此没有.width（）或height（）函数<代码>var canvas=document.getElementById（'drawing'）

canvas.width=parent.width（）

canvas.height=parent.height（）这是一个很好的选择，因为它允许您在CSS中设置大小，它自然属于哪个位置，IMO。在哪个位置有灵活的方式来指定，例如vw和vh。
var context = canvas.getContext('2d');
context.scale(2,2);

var canvas =  document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");