在画布上绘制好看的线条（类似于Flash）（HTML5）- 可能吗？

Question

有没有办法使用JavaScript和Canvas "更好"地反锯齿绘制线条，就像Flash一样？

我知道使用Math.floor(coord)+0.5技巧可以在需要时得到精确的1像素线，但那不是我的意思。以下使用Canvas绘制的蓝色线在所有支持HTML5和Cavas的浏览器中看起来都很丑，因此它们可能使用相同的糟糕抗锯齿算法（可能是为了速度而编写，而不是为了最佳视觉效果）。无论线条宽度如何（实际上越厚，越丑），情况都是相同的：

1像素蓝线截图：

3像素蓝线截图：

正如您所看到的，这不是绘制良好抗锯齿线条的最美观方式，只有较粗的线条看起来好看。客户要求我开发的图形操作应用程序“看起来好看”，从美学角度非常苛刻，如果我无法解决这个问题，我可能会放弃HTML5 / Canvas方案而采用Flash方式。或者，我可以在JavaScript中编写好的反锯齿线条绘制算法（有人可以为我提供一些资源吗？）。抱歉没有添加在Flash中绘制的线条图片，但重点是它们看起来很好，反锯齿效果做得"对"

- NeuronQ

---

你知道当你使用大写字母时，人们会感觉你在咆哮，对吧？在必要的情况下适度使用粗体和斜体，但全大写就很让人反感。你可能会说它很丑陋。 - T.J. Crowder

就你的绘图而言，我在想你是否真的需要使用Canvas。矢量图似乎更加适合。RaphaelJS通过SVG和VML在Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+和Internet Explorer 6.0+上提供漂亮的线条。这些都是支持的渲染引擎，你可以在必要时（并且只在必要时）使用一个覆盖了z轴顺序的Canvas位图。 - T.J. Crowder

谢谢！我现在正在研究RaphaelJS，看它是否适合我的应用程序，并且性能方面是否可接受... - NeuronQ

@T.J. Crowder：想办法在stackoverflow标题中添加粗体或斜体 - 然后你就可以批评了。 - Ian Boyd

@Ian Boyd：我评论的那个问题版本在文本中使用了全大写字母。至于标题：也许没有允许强调的原因？使用全大写字母也不是答案吧？ - T.J. Crowder

Answer 1

与其使用2D绘图API，您可以使用SVG矢量元素。您将不得不实现自己的API来完成它，但这样您将获得美丽的线条，就像Flash中的那些一样。 SVG-edit 是在浏览器中使用SVG所能做的事情的一个示例。

- Marius

Answer 2

从Marius的回答中借鉴：

<?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元素。而且，未来它将具有硬件加速功能。

- Ian Boyd

Answer 3

我怀疑你很难找到一种既不会使网页失去响应速度，又能让它看起来真正好看的东西。但有一件事情可以尝试，这不会对性能造成太大影响：绘制4条线，每条线都在x和y轴上略微偏移一个像素。不过，这样做的缺点是看起来会有点模糊。

- rob