Angularjs 指令 Canvas 模糊

Question

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

jsfiddle:http://jsfiddle.net/pgbyvtw7/

不幸的是我无法使绘图清晰锐利 因为一切都有些模糊(至少在我的 Nexus5 上，在我的电脑显示器上它看起来不错，但也不太好)。

我基本上在使用
ctx.arc(x, y, 10, angleBackStart, angleStop, false);
我不是通过 css 在 Canvas 元素本身上设置宽度和高度。我试过 ctx.scale(2,2)事情，但它什么也不做。我看到一些文章将东西移到 0.5，但由于圆圈是圆形的，这也无济于事。

以某种方式必须可以使圆圈清晰，因为浏览器可以渲染诸如 svg 和边框半径之类的东西。我阅读了关于 hdpi canvas 的 html5 岩石文章，但它过于关注图像和字体，所以也许我错过了那里的东西。

有什么办法可以让圆圈变尖？

Answer 1

我更新了您的 fiddle ，以便它实际上使用 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 与以前的大小相同:

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

Updated fiddle