在画布上绘制GOOD LOOKING（如在Flash中）线条（HTML5） - 可能吗？

Question

有没有办法使用javascript绘制一条线和带有“更好”抗锯齿的画布，就像Flash一样？

我知道Math.floor（坐标）+0.5技巧可以在需要时获得正好1像素的线，但这不是我的意思。使用canvas绘制的以下蓝线在所有浏览器中支持html5和cavas，因此它们可能使用相同的坏抗锯齿算法（可能是针对速度编码的，而不是针对最好的视觉印象）。无论线宽如何（实际上更粗，更丑），它都是一样的：

1px蓝线截图裁剪：

和3px：

正如您所看到的，这不是绘制良好的抗锯齿线的最美妙方式，只有较低的线看起来不错。客户要求我在上工作的图形操作应用程序必须“看起来很好”并且对美学pov非常苛刻且我可能会放弃HTML5 / Canvas解决方案并采用Flash方式如果我无法解决这个问题。或者也许我可以编写一个很好的抗锯齿线在javascript中绘制算法（任何人都可以给我一些资源吗？）抱歉没有添加一个用Flash绘制的线条的图片，但关键是它们看起来不错，抗锯齿是< em>做得好。

Answer 1

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

Answer 2

脱离马吕斯的回答：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

<rect width="100" height="50" y="37"
style="fill:none;stroke-width:1;
stroke:rgb(0,0,0)"/>

<rect width="100" height="50" x="200"
   style="fill:none;stroke-width:1;
   stroke:rgb(0,0,0)"/>

<line x1="50" y1="67" x2="250" y2="25"
   style="stroke:rgb(0,0,255);stroke-width:2"/>

<text x="2" y="50" >Beta</text>
<text x="201" y="13" >Omega</text>

</svg>

可以使用javascript在客户端绘制SVG，因为它只是DOM元素。而且，未来，它是硬件加速的。

Answer 3

我怀疑你会发现任何会使它看起来真正好的东西，它不会太慢而无法使用。你可以尝试的一件事不会对性能造成太大影响，就是画4条线叠加在一起，每条线在x和y上偏移一小部分像素。缺点是看起来有点模糊。