Chcę kolorowej warstwy pokrywy płótnie i ma przezroczysty otwór do pokazywania wstecznego {x0}}.

Metoda clip() jest odwrotną obsługą w moim przypadku.

0
lei li 27 luty 2019, 05:26

2 odpowiedzi

Najlepsza odpowiedź

Masz rację, ale możesz narysować kształt z otworem do klipu na płótnie.

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>
0
enxaneta 27 luty 2019, 14:03

Możesz użyć clearRect(x,y,width,height). Zobacz Tutaj Więcej szczegółów.

0
PeaBrain 27 luty 2019, 17:29