Question

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

data

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();

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>

画布多边形边框已裁剪

1 个答案: