我们有一个HTML5绘图应用程序,用户可以使用铅笔工具绘制线条。
与基于Flash的绘图应用程序相比,这些线条略有锯齿状边缘,看起来有些模糊。发生这种情况是因为用户需要在绘制时保持线条完全笔直,或算法检测每个像素偏差并将其投影为锯齿状边缘。
因此不可能画出光滑,锐利的圆圈。
不知何故,其他绘图应用程序能够平滑这些锯齿状边缘,同时让用户绘制线条(直线或不线)。
有没有办法可以消除这些线?
演示(选择铅笔工具):http://devfiles.myopera.com/articles/649/example5.html
我们的应用使用类似的代码。
答案 0 :(得分:8)
以下是使用二次曲线和“' round”快速方法的示例。 lineJoin
:
答案 1 :(得分:5)
至于行或向量..这篇文章就是你想要的
Drawing GOOD LOOKING (like in Flash) lines on canvas (HTML5) - possible?
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();
证明
答案 2 :(得分:0)
您可能希望在绘制的线上强制执行最小长度。为此,请使用该示例代码的铅笔部分并将其更改为以下内容:
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();
}
};
};