画布多边形边框被裁剪

Question

当我将线宽设置为大于 1 时，该线显示为裁剪。 我想知道如何在不裁剪的情况下以该画布尺寸显示多边形，考虑到定义的线宽。 提前感谢！

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var polygon = [
{x: 178, y: 160}, {x: 124, y: 0}, {x: 265, y: 88},
{x: 382, y: 0}, {x: 393, y: 118}, {x: 770, y: 178},
{x: 479, y: 221}, {x: 441, y: 228}, {x: 579, y: 376},
{x: 309, y: 314}, {x: 197, y: 428}, {x: 183, y: 304},
{x: 0, y: 324}, {x: 132, y: 240}, {x: 36, y: 152}
];
ctx.strokeStyle = "rgba(46, 139, 86, 1.00)";
ctx.fillStyle = "rgba(156, 205, 50, 1.00)";
ctx.lineWidth = 9;
ctx.beginPath();
ctx.moveTo(polygon[0].x, polygon[0].y);
for( var i = 1; i<polygon.length; i++){
ctx.lineTo(polygon[i].x, polygon[i].y);
}
ctx.closePath();
ctx.stroke();
ctx.fill();

<canvas id="myCanvas" width="770" height="428" style="border:1px solid #d3d3d3;">
</canvas>

Answer 1

所以你试图把它保持在画布的范围内？如果是这样，您可以使用clip来实现它，然后将当前lineWidth加倍并在该点填充/抚摸，使其保持在画布的边界内。默认剪辑算法不允许在其外部填充点，这允许它始终适用于画布边界。

下面是示例。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var polygon = [
{x: 178, y: 160}, {x: 124, y: 0}, {x: 265, y: 88},
{x: 382, y: 0}, {x: 393, y: 118}, {x: 770, y: 178},
{x: 479, y: 221}, {x: 441, y: 228}, {x: 579, y: 376},
{x: 309, y: 314}, {x: 197, y: 428}, {x: 183, y: 304},
{x: 0, y: 324}, {x: 132, y: 240}, {x: 36, y: 152}
];
ctx.strokeStyle = "rgba(46, 139, 86, 1.00)";
ctx.fillStyle = "rgba(156, 205, 50, 1.00)";
const lineWidth = 9;
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.moveTo(polygon[0].x, polygon[0].y);
for( var i = 1; i<polygon.length; i++){
ctx.lineTo(polygon[i].x, polygon[i].y);
}
ctx.closePath();
ctx.save();
ctx.clip();
ctx.lineWidth *= 2;
ctx.fill();
ctx.stroke();
ctx.restore();

<canvas id="myCanvas" width="770" height="428" style="border:1px solid #d3d3d3;">
</canvas>