HTML5 Canvas-超出矩形范围时隐藏文本部分

Question

我的问题很简单。我只想在矩形之外制作不可见的文本部分。此图像将有助于了解我想要什么。如何在画布上使文本看不见的灰色部分？感谢帮助！

Answer 1

绘制矩形后，调用

ctx.clip();

然后绘制仅应位于其中的零件。

Source

Answer 2

我会使用ctx.globalCompositeOperation = "source-atop"

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 400;
let ch = canvas.height = 110;
ctx.fillStyle = "#ccc";

ctx.beginPath();
ctx.fillRect(100,25,200,60);

ctx.globalCompositeOperation = "source-atop"
ctx.font="2em Verdana";
ctx.fillStyle = "#f00";

ctx.fillText("This is some text",110,65);

canvas{border:1px solid;}

<canvas id="canvas"></canvas>