HTML5 Canvas 线宽错误？

Question

我有这样的代码：

context.strokeStyle = "navy";
context.lineWidth = 4;

context.beginPath();

var points = [
    {x:605, y:149},
    {x:613, y:131 },
    {x:875, y:244},
    {x:779, y:224}
];

for (var i = 0; i < points.length; i++) {
    if (i === 0) {
        context.moveTo( points[i].x, points[i].y );
    }
    else {
        context.lineTo( points[i].x, points[i].y );
    }
}

context.closePath();
context.stroke();

context.strokeStyle = "red";
context.beginPath();

points = [
    {x:565, y:224},
    {x:565, y:244},
    {x:875, y:244},
    {x:779, y:224}
];

for (i = 0; i < points.length; i++) {
    if (i === 0) {
        context.moveTo( points[i].x, points[i].y );
    }
    else {
        context.lineTo( points[i].x, points[i].y );
    }
}

context.closePath();

context.stroke();

但是在交点{x:875, y:244}上结果很奇怪，两条线Extended.

当我设置linewidth=1时，效果不错

有什么问题吗？当线宽大于 1 时，如何修复代码以使其看起来更好。

Answer 1

这是由于默认的线连接模式是 miter 并且斜接限制设置为 10。这将尝试创建一个尖锐的连接，这有时意味着连接的峰会在角度变得陡峭的地方向前移动一些。

降低 miterLimit（在抚摸之前），它应该有效：

context.miterLimit = 1;

可以选择尝试不同的连接类型，例如：

context.lineJoin = "round";
context.lineJoin = "bevel";

HTML5 Canvas 线宽错误？

HTML5 Canvas Line Width Bug?

html

javascript

canvas