Canvas 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 。

您可以在此處關注如何創建圓角矩形的示例代碼： 如何在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">