HTML5画布描边（）粗且模糊

Question

我试图允许用户在画布上绘制一个矩形（如选择框）。我得到了一些荒谬的结果，但后来我注意到，即使只是尝试参考此处中的代码，我得到了巨大的模糊线，但不知道为什么。

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

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

Answer 2

由于某种原因，你的画布被拉伸了。因为您将其 css 属性 width 设置为 100%，所以它会从某种本机大小拉伸它。这是使用 css width 属性和 标记上的 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');
    //...

Answer 3

我的做法是在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");

Answer 4

您没有以像素为单位指示画布大小，因此它被放大了。这里是300x150。尝试设置宽度、高度

Answer 5

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

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

Answer 6

这些评论中提到的 css 大小问题是正确的，但另一个可能导致线条模糊的更微妙的事情是忘记在绘制线条之前调用 context.beginPath() 。如果不调用它，您仍然会得到一条线，但它不会被平滑，这使得该线看起来像一系列步骤。

Answer 7

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

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

如果你有像我这样的情况，请检查你的情况是否相同。