用户在 HTML5 画布应用程序中绘制的平滑锯齿线?

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

问题描述

我们有一个 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/文章/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 画布应用程序中绘制的平滑锯齿线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！