javascript - Canvas 上的 SVG 黑线看起来是灰色的？

Question

我在 illustrator 中创建了一个仅包含基本线条的网格，并保存为 SVG。然后我将该 svg 加载到与 svg 大小完全相同的 html Canvas 中。

但是，无论我做什么， Canvas 上的黑线 svg 看起来都是灰色的，事实上，奇数一两条是黑色的，但其他的看起来像是正在消除锯齿。

我不希望 Canvas 这样做，我需要线条清晰且黑色，而不是灰色!在我关闭抗锯齿功能后，它们在 illustrator 中看起来很好。

有谁知道如何防止 Canvas 这样做？我正在使用 Fabric js

Answer 1

您可以使用以下属性关闭抗锯齿功能:

shape-rendering="crispEdges"

它可以是样式属性，也可以在 CSS 中指定。您需要编辑 svg 或 CSS。您无法在 Illustrator 中设置此项。

这对于矩形网格来说效果很好，但弯曲或 Angular 线看起来会更糟。当然。

您还可以通过小心放置线条的位置来避免抗锯齿。有关详细信息，请参阅以下答案。

https://stackoverflow.com/a/23376793/1292848