使画布背景具有透明矩形

Question

我想要一个彩色的帆布覆盖层，它有一个透明的矩形孔，用于显示背面div。

在我的情况下，clip()方法是相反的操作。

Answer 1

您是对的，但是您可以绘制带有孔的形状以裁剪画布。

let ctx = c.getContext("2d");
c.width = 300;
c.height=300;
ctx.fillStyle = "gold";

ctx.beginPath();
ctx.moveTo(0,150);
ctx.lineTo(0,300);
ctx.lineTo(300,300);
ctx.lineTo(300,0);
ctx.lineTo(0,0);
ctx.lineTo(0,150);
ctx.lineTo(50,150);
ctx.lineTo(50,50);
ctx.lineTo(250,50);
ctx.lineTo(250,250);
ctx.lineTo(50,250);
ctx.lineTo(50,150);
ctx.closePath();

ctx.clip();

ctx.beginPath();
ctx.fillRect(0,0,300,300);

div,
canvas {
  width: 300px;
  height: 300px;
  position: absolute;
  border: 1px solid;
  top: 0;
  left: 0;
}
div {
  background: black;
}

p {
  line-height: 300px;
  text-align: center;
  color:white;
}

<div><p>The Div</p></div>
<canvas id="c"></canvas>

Answer 2

您可以使用clearRect(x,y,width,height)。有关更多详细信息，请参见here。