javascript 用户在 HTML5 画布应用程序中绘制的平滑锯齿线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9895494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth jagged lines drawn by user in HTML5 canvas app?
提问by Crashalot
We have an HTML5 drawing app where users can draw lines using a pencil tool.
我们有一个 HTML5 绘图应用程序，用户可以在其中使用铅笔工具绘制线条。
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.
与基于 Flash 的绘图应用程序相比，这些线条的边缘略有锯齿，显得有些模糊。发生这种情况是因为用户在绘制时需要保持线条完全笔直，或者算法会感知每个像素偏差并将其投影为锯齿状边缘。
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?
有什么办法可以消除这些线条吗？
Demo (choose the pencil tool): http://devfiles.myopera.com/articles/649/example5.html
演示（选择铅笔工具）：http: //devfiles.myopera.com/articles/649/example5.html
Our app uses similar code.
我们的应用程序使用类似的代码。
回答by Simon Sarris
Here's an example of a quick way using quadratic curves and 'round' lineJoin:
这是使用二次曲线和 'round' 的快速方法示例lineJoin：
回答by samccone
As for lines or vectors .. this post is what you want
至于线条或向量..这篇文章就是你想要的
Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?
在画布 (HTML5) 上绘制好看（如 Flash）的线条 - 可能吗？
TL;DR use SVG
TL;DR 使用 SVG
where ctx is context
其中 ctx 是上下文
ctx.lineCap = "round"
then for the drawing
然后为绘图
ctx.beginPath();
ctx.moveTo(data.line.startX,data.line.startY);
ctx.lineTo(data.line.endX, data.line.endY);
ctx.strokeStyle = data.line.color;
ctx.stroke();
proof
证明
回答by Kodra
You might want to enforce a minimum length on the line that is drawn. To do this, take the pencil section of that example code and change it to something like this:
您可能希望在绘制的线上强制执行最小长度。为此，请将该示例代码的铅笔部分更改为如下所示：
tools.pencil = function () {
var tool = this;
// variables for last x, y and min_length of line
var lx;
var ly;
var min_length = 3;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
// update last x,y coordinates
lx = ev._x;
ly = ev._y;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
this.mousemove = function (ev) {
if (tool.started && (Math.sqrt(Math.pow(lx - ev._x, 2) + Math.pow(ly - ev._y, 2)) > min_length)) {
context.lineTo(ev._x, ev._y);
context.stroke();
lx = ev._x;
ly = ev._y;
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
