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}，两行扩展时非常奇怪。

当我设置linewidth = 1时，结果是好的

有什么问题？当线宽大于1时，如何修复代码以便查看。

Answer 1

这是由于默认的线连接模式为miter且斜接限制设置为10.这将尝试创建一个明显的连接，这有时意味着连接的峰值将在角度变得陡峭的情况下向前移动。

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

context.miterLimit = 1;

（可选）尝试不同的连接类型，例如：

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

HTML5 Canvas Line Width Bug？

1 个答案: