带圆角的画布 clearRect

Question

我用ctx.clearRect() 剪出了一个矩形的画布。它在图像中生成一个矩形透明区域。但是有没有可能用圆角切掉它？

就像这样：

我的代码：

function createHolesInBg() {
    // overlay the image on the video and cut holes to see through to the video
    var image = document.getElementById('bg-one');
    var canvas = document.getElementById("window-canvas");
    var ctx = canvas.getContext("2d");
  
    ctx.drawImage(image, 0, 0);

    window.setTimeout(function() {
      ctx.clearRect(390, 150, 400, 300);
    }, 0);
};

// show video for 5 seconds and then start to cut some holes overlay bg
window.setTimeout(function() {
  createHolesInBg();
}, 0);

// mute the video after 15 seconds as its gets annoying in blog post
window.setTimeout(function() {  
  var video = document.getElementById("video-elm");
video.muted = false;
}, 0);

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

#window-canvas { pointer-events: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- background video -->
<div stlye="position:absolute; top:0; left: 0;">
 <video width="1180" height="620" controls autoplay loop id="video-elm">
  <source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4">
  Your browser does not support HTML5 video.
</video>  
</div> 

<!-- canvas layer -->
<canvas id="window-canvas" height="620" width="1280" style="position: absolute; top:0; left:0;"></canvas>

<!-- hidden foreground image for use by Canvas -->
<img src="https://i.pinimg.com/originals/0c/80/b6/0c80b6dfc2b311bac185c0b310bb18da.jpg" style="position: absolute; top:0; left:0; display:none;" id="bg-one">

Answer 1

我在 Github 上找到了这段代码：https://gist.github.com/getify/2926699

方法是先创建一个你想要的形状的剪辑区域，然后做一个包含整个剪辑区域的clearRect。

您可以在此处按照此示例代码了解如何创建圆角矩形：How to draw a rounded Rectangle on HTML Canvas?

将这两件事结合起来应该可以得到你想要的结果。

function clearRoundRect(context, x, y, width, height, radius) {
  context.save();
  context.beginPath();
  roundRect(context, x, y, width, height, radius, false, true);
  context.clip();
  context.clearRect(x, y, width, height);
  context.restore();
}

Answer 2

1. 创建圆角矩形路径
2. 剪辑一下
3. 清除整个画布

function roundRect(ctx, x, y, width, height, radius) {
  if (typeof radius === "undefined") {
    radius = 5;
  }
  if (typeof radius === "number") {
    radius = {
      tl: radius,
      tr: radius,
      br: radius,
      bl: radius
    };
  } else {
    var defaultRadius = {
      tl: 0,
      tr: 0,
      br: 0,
      bl: 0
    };
    for (var side in defaultRadius) {
      radius[side] = radius[side] || defaultRadius[side];
    }
  }
  ctx.beginPath();
  ctx.moveTo(x + radius.tl, y);
  ctx.lineTo(x + width - radius.tr, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
  ctx.lineTo(x + width, y + height - radius.br);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
  ctx.lineTo(x + radius.bl, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
  ctx.lineTo(x, y + radius.tl);
  ctx.quadraticCurveTo(x, y, x + radius.tl, y);
  ctx.closePath();
}

function createHolesInBg() {
  // overlay the image on the video and cut holes to see through to the video
  var image = document.getElementById('bg-one');
  var canvas = document.getElementById("window-canvas");
  var ctx = canvas.getContext("2d");

  ctx.drawImage(image, 0, 0);

  setTimeout(function() {
    roundRect(ctx, 390, 150, 400, 300, 50);
    ctx.clip();
    ctx.clearRect(0, 0, canvas.width, ctx.canvas.height);
  }, 0)
}

// show video for 5 seconds and then start to cut some holes overlay bg
window.onload = function() {
  window.setTimeout(function() {
    createHolesInBg();
  }, 0);
}
// mute the video after 15 seconds as its gets annoying in blog post
window.setTimeout(function() {
  var video = document.getElementById("video-elm");
  video.muted = false;
}, 0);

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

#window-canvas {
  pointer-events: none;
}

<!-- background video -->
<div stlye="position:absolute; top:0; left: 0;">
  <video width="1180" height="620" controls autoplay loop id="video-elm">
  <source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4">
  Your browser does not support HTML5 video.
</video>
</div>

<!-- canvas layer -->
<canvas id="window-canvas" height="620" width="1280" style="position: absolute; top:0; left:0;"></canvas>

<!-- hidden foreground image for use by Canvas -->
<img src="https://i.pinimg.com/originals/0c/80/b6/0c80b6dfc2b311bac185c0b310bb18da.jpg" style="position: absolute; top:0; left:0; display:none;" id="bg-one">