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

时间:2018-04-03 03:59:48

标签: javascript html5-canvas

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

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

代码

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>

2 个答案:

答案 0 :(得分:3)

你可以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>

答案 1 :(得分:0)

这是我为调整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>