用户在HTML5画布应用程序中绘制的平滑锯齿线条？ [英] Smooth jagged lines drawn by user in HTML5 canvas app?

问题描述

我们有一个HTML5绘图应用程序，用户可以使用铅笔工具绘制线条。

We have an HTML5 drawing app where users can draw lines using a pencil tool.

与基于Flash的绘图应用相比，线条略有锯齿状边缘并出现有点模糊。发生这种情况是因为用户需要在绘制时保持线条完全笔直，或算法检测每个像素偏差并将其投影为锯齿状边缘。

Compared to Flash-based drawing apps, the lines have slightly jagged edges and appear somewhat blurry. This happens because users need to keep the line perfectly straight while drawing, or the algorithm senses every pixel deviation and projects it as a jagged edge.

绘制光滑，锐利的圆圈是结果不可能。

Drawing smooth, sharp circles is impossible as a result.

不知何故，其他绘图应用程序能够平滑这些锯齿状边缘，同时让用户画线（直线或不线）。

Somehow, other drawing apps are able to smooth out these jagged edges while letting users draw lines (straight or not).

有没有办法可以平滑这些线？

Is there a way we can smooth out these lines?

演示（选择铅笔工具）： http://devfiles.myopera.com/articles/649/example5.html

Demo (choose the pencil tool): http://devfiles.myopera.com/articles/649/example5.html

我们的应用程序使用类似的代码。

Our app uses similar code.

推荐答案

以下是使用二次曲线和'round' lineJoin ：

Here's an example of a quick way using quadratic curves and 'round' lineJoin:

http://jsfiddle.net/NWBV4/10/

这篇关于用户在HTML5画布应用程序中绘制的平滑锯齿线条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！