1

我已经在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;
};

如何避免大线中断并使我的线稳固？
谢谢你。

4

1 回答 1

2

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

设置后添加以下行lineWidth。

ctx.lineJoin = 'round';

如果您在完成所有使用的渲染之前关闭了路径，这将不起作用。lineToctx.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 。

于 2012-12-27T17:05:12.443 回答