用户在HTML5canvas应用程序中绘制的平滑锯齿线条？
我们有一个HTML5绘图应用程序，用户可以使用铅笔工具绘制线条。
与基于Flash的绘图应用程序相比，这些线条略有锯齿状边缘，看起来有些模糊。 这是因为用户需要在绘制时保持线条完全笔直，或者算法会感知每个像素偏差并将其投影为锯齿状边缘。
因此，绘制光滑，锐利的圆圈是不可能的。
不知何故，其他绘图应用程序能够平滑这些锯齿状边缘，同时让用户绘制线条（直线或不线）。
有没有办法可以消除这些线条？
演示（选择铅笔工具）： http ： //devfiles.myopera.com/articles/649/example5.html
我们的应用使用类似的代码
这是一个使用二次曲线和’ lineJoin的快速方法lineJoin ：
至于线条或向量..这篇文章就是你想要的
在canvas上绘制GOOD LOOKING（如在Flash中）线条（HTML5） – 可能吗？
TL; DR使用SVG
其中ctx是上下文
ctx.lineCap = "round"
然后为绘图
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();
certificate
您可能希望在绘制的线上强制执行最小长度。 为此，请使用该示例代码的铅笔部分并将其更改为以下内容：
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(); } }; };