Question

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

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

Answer 1

如果使用css设置画布高度和宽度而不是在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%，所以它会从某种原生大小扩展它。这是在width标记上使用css width属性和<canvas>属性之间的区别。您可能想尝试使用一些javascript来填充视口（see 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宽度/高度分配给我的画布，因为我需要保持其物理尺寸静态，同时增加其视网膜屏幕的内联尺寸。

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

HTML5画布笔画（）粗而模糊

7 个答案: