帆布：曲线没有断裂

Question

我已在canvas中实施了线条画。但是我遇到了一个问题：

当线宽小（3）时，曲线看起来不错;
当线宽很大（20）时，由于断裂，曲线看起来不太好。

canvas.node.onmousemove = function (e) {
         if (!canvas.isDrawing) {
             return;
         }
         var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;
         ctx.beginPath();
         ctx.moveTo(canvas.lastX, canvas.lastY);
         ctx.strokeStyle = '#000000';
         ctx.lineWidth = self.lineWidth();
         ctx.lineTo(x, y);
         ctx.stroke();
         ctx.closePath();
         canvas.lastX = x;
         canvas.lastY = y;
};
canvas.node.onmousedown = function (e) {
         canvas.isDrawing = true;
         canvas.lastX = e.pageX - this.offsetLeft;
         canvas.lastY = e.pageY - this.offsetTop;
};
canvas.node.onmouseup = function (e) {
         canvas.isDrawing = false;
};

如何避免大线断裂并使我的线条固定？
谢谢。

Answer 1

您是否尝试将lineJoin属性设置为画布上下文？

设置lineWidth后添加以下行。

ctx.lineJoin = 'round';

如果您在使用lineTo完成所有ctx.closePath()的渲染之前关闭您的路径， 。

您需要在开始绘制线之前打开路径，然后在完成绘制线之后将其关闭。

此外，如果您在绘图期间使用moveTo移动绘图光标，lineJoin将无法发挥作用。

您可以尝试以下修改过的代码（我最后还包含了一个JSFiddle链接）。

编辑1：更新了代码，因为我忘了向其添加lineJoin属性。

编辑2：将moveTo行移至相应的侦听器方法。

canvas.node.onmousemove = function (e) {
         if (!canvas.isDrawing) {
             return;
         }
         var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;

         ctx.lineTo(x, y);
         ctx.stroke();

         canvas.lastX = x;
         canvas.lastY = y;
};
canvas.node.onmousedown = function (e) {
         canvas.isDrawing = true;
         canvas.lastX = e.pageX - this.offsetLeft;
         canvas.lastY = e.pageY - this.offsetTop;

         ctx.moveTo(canvas.lastX, canvas.lastY);
         ctx.beginPath();
         ctx.strokeStyle = '#000000';
         ctx.lineWidth = self.lineWidth();
         ctx.lineJoin = 'round';

};
canvas.node.onmouseup = function (e) {
         ctx.closePath();
         canvas.isDrawing = false;
};

使用JSFiddle here。