HTML5画布stroke()方法的线条变粗且模糊

Question

我正在尝试让用户在画布上绘制一个矩形（就像选择框一样）。我得到了一些荒谬的结果，但后来我注意到，即使只是尝试从参考资料这里复制代码，我也会得到巨大模糊的线条，但我不知道为什么。

它托管在dylanstestserver.com/drawcss。JavaScript 是内联的，所以你可以检查一下。我使用 jQuery 简化获取鼠标坐标的过程。

- Nona Urbiz

---

链接已失效。 - john-jones

我也遇到了输出变粗糙和模糊的问题，我之前将宽度和高度设置为百分比或视窗单位。直接将像素值设置为宽度和高度在我的情况下起作用了。 - Sarju

Answer 1

如果您使用CSS来设置canvas的高度和宽度，而不是在canvas元素中设置高度和宽度，则会出现模糊问题。

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

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

- DougLeary

Answer 2

由于你设置了canvas的css属性width为100％，导致它被拉伸了。这是使用css width属性和<canvas>标签上的width属性之间的差异。建议尝试使用一些JavaScript来填充视口大小（参见jQuery .width()）：

jQuery(document).ready(function(){
    var canvas = document.getElementById('drawing');
    canvas.width(($(window).width()).height($(window).height());
    var context = canvas.getContext('2d');
    //...

- clarkf

---

这个评论真的帮了我很多，但是有几个错误。这是对我有效的代码版本。由于您使用了getElementById，所以没有.width()或.height()函数。var canvas = document.getElementById('drawing'); canvas.width = parent.width(); canvas.height = parent.height(); - Brent Waggoner

Answer 3

我的做法是在CSS中设置画布元素的宽度和高度，然后将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");

- miller the gorilla

---

这是一个不错的选择，因为它让你在 CSS 中设置大小，这是它自然所属的地方，我个人认为。 - ctorx

而且还有灵活的指定方式，例如vw和vh。 - trss

Answer 4

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

var context = canvas.getContext('2d');
context.scale(2,2);

- laktak

---

这将增加画布的尺寸。 - Praveen

Answer 5

您没有指定画布尺寸（以像素为单位），因此它被放大了。在这里是300x150。尝试设置宽度和高度。

- artificialidiot

Answer 6

这些评论中提到的CSS大小问题是正确的，但另一种更微妙的导致模糊线条的原因是在画线之前忘记调用context.beginPath()。如果没有调用它，你仍然会得到一条线，但它不会被平滑处理，这会使线看起来像一系列步骤。

- Scott Antipa

Answer 7

我发现我的图像模糊的原因是内联宽度和CSS宽度之间存在轻微差异。

我的画布同时具有内联宽度/高度参数和CSS宽度/高度分配，因为我需要保持其物理尺寸静态，同时增加其内联尺寸以适应视网膜屏幕。

如果您遇到类似情况，请检查它们是否相同。

- Fijjit