我正在尝试允许用户在画布上绘制矩形(例如选择框)。我得到了一些荒谬的结果,但后来我注意到,即使只是从我的参考中尝试代码 这里, ,我得到了巨大的模糊线条,不知道为什么。

它是在 dylanstestserver.com/drawcss. 。 JavaScript是内联的,因此您可以检查一下。我正在使用jQuery简化获取鼠标坐标。

有帮助吗?

解决方案

由于某种原因,您的画布被拉伸。因为您有其CSS属性 width 调成 100%, ,它正在从某种本地大小中伸展。这是使用CSS之间的区别 width 财产和 width 属性 <canvas> 标签。您可能想尝试使用一些JavaScript使其填充视口(请参阅jQuery .width()):

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

其他提示

如果您使用CSS设置画布高度和宽度,而不是在画布元素中设置高度和宽度,则会发生模糊问题。

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

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

我这样做的方法是将帆布元素设置为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");

您尚未指示像素中的帆布尺寸,因此将其缩放。这里是300x150。尝试设置宽度,高度

在视网膜显示上,您还需要扩展(除了接受答案之外):

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

这些评论中提到的CSS规模问题是正确的,但是另一个可能导致线模糊的更微妙的事情是忘记打电话给 context.beginPath() 在画线之前。如果不打电话,您仍然会得到一条线,但是它不会平滑,这使得线看起来像一系列步骤。

我发现我的原因是模糊的,是在线宽度和CSS宽度之间存在略有差异。

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

如果您有我的情况,请检查您的情况一样。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top