Question

我为angularjs创建了一个指令，使用 html5的canvas 元素可视化四个距离传感器。

不幸我无法让绘图变得清晰锐利因为一切都很模糊（至少在我的Nexus5上，在我的电脑显示器上看起来还不错，但也不好看。）

我基本上是在使用

ctx.arc(x, y, 10, angleBackStart, angleStop, false);

我在canvas元素本身上设置宽度和高度而不是通过css。我尝试了ctx.scale(2,2)但它没有做任何事情。我看到一些文章将事物转移到0.5但由于圆圈是圆形的，这也没有帮助。

不管怎样，必须有可能让圆圈变得清晰，因为浏览器可以渲染像svg和border radius这样的东西。我阅读了关于hdpi canvas的html5 rock文章，但它过于专注于图像和字体，所以也许我错过了那里的东西。

有没有办法让圆圈变得清晰？

Answer 1

我更新了你的小提琴，以便它实际上用ctx.scale来缩放，但它看起来并不那么好......使用50的音阶完全消除了所有的抗锯齿。使用0.9的比例增加了一点抗锯齿。如果你的设备显示任何不同，也许你可以试试。

var scale = 0.9;
canvas.setAttribute('width', canvas.width * scale);
canvas.setAttribute('height', canvas.height * scale);
ctx.scale(scale, scale);

一些CSS使画布的尺寸与以前相同：

canvas {
    width: 175px;
    height: 200px;
}

Answer 2

首先，将画布高度和宽度HTML属性设置为所需大小的两倍。所以：

<canvas height="400px" width="350px">

接下来，在指令的链接功能中，调整高度和宽度值以匹配这些HTML属性值。

// The canvas
var height = 400
var width = 350

接下来，在CSS中，将canvas元素的大小设置为所需的大小。

canvas {
   width: 175px;
   height: 200px;
}

最后，您想要绘制两倍大的弧，以便它们占用CSS缩放画布中的适当空间。

这里的想法很简单 - 我们以所需大小的两倍生成整个渲染画布，然后将其设置为使用CSS以一半大小显示。