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

Question

是否有任何方法可以使用javascript绘制一条线,并使用"更好"的抗锯齿画布,就像Flash一样？

我知道Math.floor(coord)+0.5技巧可以在需要时获得正好1像素的线,但这不是我的意思.在支持html5和cavas的所有浏览器中,使用canvas绘制的以下蓝线看起来很粗糙,因此它们可能使用相同的不良抗锯齿算法(可能是针对速度编码,而不是为了获得最佳视觉效果).无论线宽是多少(实际上更粗,更丑):

1px蓝线截图裁剪:

和3px:

正如你所看到的,这不是绘制良好抗锯齿线条最美丽的方法,只有较低的线看起来很好.客户要求我工作的图形操作应用程序必须 "看起来很好"并且对美学pov非常苛刻,如果我无法解决这个问题,我可能会放弃HTML5/Canvas解决方案并采用Flash方式.或者也许我可以编写一个好的抗锯齿线在javascript中绘制算法(任何人都可以给我一些资源吗？)抱歉没有添加用Flash绘制的线条的图片,但重点是它们看起来不错,抗锯齿完成对.

Answer 1

您可以使用SVG矢量元素,而不是使用2D绘图API.你必须实现自己的api才能做到这一点,但这样你就会获得漂亮的线条,就像那些闪光灯一样.该SVG编辑是的,你可以在浏览器中使用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元素.而且,未来,它是硬件加速的.