带圆角的画布 clearRect

Posted 2023-03-05

【中文标题】带圆角的画布 clearRect

【英文标题】：Canvas clearRect with rounded corners

【发布时间】：2018-12-16 09:15:44

【问题描述】：

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

【参考方案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();

【参考方案2】：

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

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