【问题标题】:Canvas line edges not smooth. How to fix this?画布线边缘不平滑。如何解决这个问题?
【发布时间】:2014-11-13 19:03:20
【问题描述】:

我正在搜索径向进度条。最近在使用画布的stackoverflow中发现。但圆圈边缘不光滑。如何修复这个模糊的图像。

JSFIDDLE : http://jsfiddle.net/fd3k7prh/

图片:

【问题讨论】:

  • 这就是所谓的抗锯齿……如果你放大,你会变得模糊。不要放大。
  • 您确定浏览器的缩放比例为 100%?这里的一切看起来都很好,但是当我放大一点点时,线条确实变得模糊了。尝试按 cmd+0 或 ctrl+0 重置缩放。
  • 不,通常它看起来不像正常形状。
  • 尽可能使用 SVG 代替画布。 SVG 是基于矢量的,可以很好地缩放,而 CANVAS 渲染的是位图,不能无损缩放。

标签: javascript html css canvas


【解决方案1】:

在我的屏幕上似乎没问题。只要您不在内部缩放画布,例如CSS 它不应该被模糊。请确保您的浏览器中是否启用了缩放(例如,通过按住 ctrl+鼠标滚动)并且您的浏览器正在显示 100% 图像。

由于 Canvas 正在显示矢量图像,因此在正常缩放时不应模糊。但是,放大它总是会使它变得模糊,因为它需要被放大。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-02-08
    • 2019-03-22
    • 1970-01-01
    • 1970-01-01
    • 2020-06-29
    • 1970-01-01
    • 2019-04-08
    • 1970-01-01
    相关资源
    最近更新 更多