Canvas clearRect带圆角

Question

I have cut out a rectangular of a canvas with ctx.clearRect() . It produces a rectangular transparent area in the image. But is there a possibility to cut it out with rounded corners?

Just like this:

My Code:

 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

I found this code on Github: https://gist.github.com/getify/2926699

The approach is to create a clipping region of the shape you want first, then do a clearRect that includes the whole clipping region.

You can follow this sample code on how to create a rounded rectangle here: How to draw a rounded Rectangle on HTML Canvas?

Combining these two things should give you the result you're looking for.

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. Create a rounded rectangle path
2. Clip it
3. Clear the whole canvas

 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">