javascript - 在 Canvas (HTML5) 上绘制好看的(如在 Flash 中)线条 - 可能吗？

Question

有没有什么方法可以像 Flash 那样使用 javascript 和具有“更好”抗锯齿功能的 Canvas 绘制线条？

我知道 Math.floor(coord)+0.5 技巧可以在您需要时获得精确的 1 像素线，但这不是我的意思。以下使用 canvas 绘制的蓝线在支持 html5 和 cavas 的所有浏览器中看起来_丑陋，因此它们可能使用相同的糟糕抗锯齿算法(可能是为了速度而编码，而不是为了最好的视觉印象)。不管线宽是多少都是一样的(其实是越粗越丑):

1px 蓝线截图裁剪:

和 3px:

如您所见，这不是绘制好的抗锯齿线的最漂亮的方法，只有下面的线看起来不错。客户要求我开发的图形处理应用程序必须“看起来不错”并且从美学 Angular 来看要求很高，我可能会放弃 HTML5/Canvas 解决方案并采用 Flash 方式如果我不能解决这个问题。或者也许我可以在 javascript 中编写一个好的抗锯齿线条绘制算法(任何人都可以给我一些资源吗？)很抱歉没有添加在 Flash 中绘制线条的图片，但关键是它们看起来不错，抗锯齿是 < em>做对了。

Answer 1

除了使用 2D 绘图 API，您还可以使用 SVG 矢量元素。你必须实现自己的 api 才能做到这一点，但那样你会得到漂亮的线条，就像 flash 中的那样。 SVG-edit是您可以在浏览器中使用 SVN 执行的操作的示例。