画布多边形边框被裁剪

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>