Question

如果它超出另一个形状，我想创建一个圆并切出一部分。

例如，如果圆圈的一半超出正方形，则切除外侧的所有内容，但不切除内侧的内容。像这个片段之类的东西，除了广场外面的部分是隐藏的。我宁愿避免掩盖它，因为这将覆盖整个屏幕的另一个画布。

代码

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(70, 90, 60, 0, Math.PI * 2, false)
ctx.stroke();
ctx.restore();

<html>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

Answer 1

你可以clip()圈子，就像这样;

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.closePath();
ctx.clip();  // clip circle
ctx.beginPath();
ctx.arc(70, 90, 60, 0, Math.PI * 2, false)
ctx.stroke();
ctx.restore();

<html>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

Answer 2

这是我为调整sqaure的外部部分而调整的尺寸

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(70, 90, 60, 10, -4*Math.PI * .05 , false)
ctx.stroke();
ctx.restore();

<html>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

如果它使用javascript进入画布外，我怎么能剪出一个形状？

2 个答案: