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

问题描述

有没有什么方法可以像 Flash 那样使用 javascript 和具有更好"抗锯齿功能的画布画一条线?

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

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

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:

如您所见，这不是绘制良好抗锯齿线的最佳方式，只有下面的线看起来不错.客户要求我使用的图形处理应用必须看起来不错"，并且对美学观点要求很高，我可能会放弃 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.

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