在画布 (HTML5) 上绘制好看的（如在 Flash 中）线条 - 可能吗？

Posted 2023-03-05

【中文标题】在画布 (HTML5) 上绘制好看的（如在 Flash 中）线条 - 可能吗？

【英文标题】：Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?

【发布时间】：2011-05-09 21:47:40

【问题描述】：

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

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

1px 蓝线截图裁剪：

和 3px：

如您所见，这不是绘制良好抗锯齿线的最漂亮的方法，只有下面的线看起来不错。客户要求我开发的图形处理应用程序必须“看起来不错”，并且对美学观点要求很高，我可能会放弃 HTML5/Canvas 解决方案并采用 Flash 方式如果我不能解决这个问题。或者也许我可以在 javascript 中编写一个很好的抗锯齿线条绘制算法（谁能给我一些资源？）很抱歉没有添加用 Flash 绘制线条的图片，但关键是它们看起来不错，抗锯齿是 做得对。

【问题讨论】：

您知道当您使用全部大写字母时人们会听到 SHOUTING，对吧？必要时使用适当数量的 bold 和 italics，但 ALL CAPS 只是一种关闭。丑，你可能会说。

FWIW，从您的绘图来看，我想知道您是否真的想使用 Canvas。看起来向量可能更合适。 RaphaelJS 似乎通过 SVG 和 VML 在 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+ 上提供了漂亮的线条。这是那里支持的一组很好的渲染引擎。然后，您可以在哪里/何时/如果您真的需要位图时使用画布（以 z 顺序覆盖）。

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

@T.J. Crowder：弄清楚如何将 bolding 或 italics 添加到 *** 标题 - 然后你可以批评

@Ian Boyd：我评论的问题版本是使用文本中的全部大写字母。至于标题：也许有一个不允许强调的原因？使用全大写不是答案吗？

【参考方案1】：

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

【参考方案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   version="1.1"
      xmlns="http://www.w3.org/2000/svg">

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

<rect   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 元素。而且，今后，它还可以进行硬件加速。

【参考方案3】：

我怀疑你是否会找到任何能让它看起来真正好并且不会太慢而无法使用的东西。您可以尝试的不会对性能造成太大影响的一件事是绘制 4 条相互重叠的线，每条线在 x 和 y 中偏移一小部分像素。缺点是看起来有点模糊。