绘制好的看（在Flash中）画布上的线条（HTML5） - 可能吗？ [英] Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?

问题描述

有什么方法可以使用javascript和更好的抗锯齿绘制一条线，像Flash吗？

Is there any way to draw a line using javascript and the canvas with "better" antialiasing, like Flash does?

我知道Math.floor +0.5技巧，当你需要一个精确的1像素线，但这不是我的意思。在所有浏览器中，使用canvas在所有浏览器中显示的以下蓝色线条支持html5和cavas，因此他们可能使用相同的 bad 抗锯齿算法（可能是针对速度编码的，而不是针对最佳视觉印象）。无论线宽是多少，都是一样的（实际上是更厚，更丑陋）：

I know the Math.floor(coord)+0.5 trick to get an exactly 1 pixel line when you need it, but that's not what I mean. The following blue lines drawed using canvas look _ugly in all browsers supporting html5 and cavas, so they are probably using the same bad antialiasing algorithm (probably coded for speed, not for the best visual impression). It's the same no matter what the line width is (actually the thicker, the uglier):

1px蓝线截图裁剪：

1px blue lines screenshot crop:

和3px ：

如你所见，这不是绘制良好的抗锯齿线的最美丽的方法，只有下面的线看起来不错。客户要求我在上工作的图形操作应用程序必须看起来不错，从美观pov和非常苛刻，我可能会挖掘HTML5 / Canvas解决方案，并采取Flash方式如果我不能解决这个问题。或者，也许我可以在javascript中编写一个好的抗锯齿线绘制算法（任何人都可以给我一些资源的？）对不起，不添加一个图片与在Flash中绘制的线，但重点是，他们只是看起来不错，抗锯齿是<

As you can see, this is not the most beautiful way to draw good antialiased lines, and only the lower line looks good. The client is demanding that the graph manipulation app I work on must "look good" and is very demanding from the aesthetics pov and I will probably ditch the HTML5/Canvas solution and go the Flash way if I can't solve this problem. Or maybe I could code a good antialiased lines drawing algorith in javascript (can anyone give me some resources for that?) Sorry for not adding a picture with lines drawn in Flash, but the point is that they just look good, the antialiasing is done right.

推荐答案

退出Marius的回答：

Leeching off Marius's answer:

<?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>

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

SVG can be drawn client side with javascript, since it's just DOM elements. And, going forward, it is hardware accelerated.

这篇关于绘制好的看（在Flash中）画布上的线条（HTML5） - 可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！