使用画布，绘制并填充一个带有矩形孔的矩形

Question

使用HTML5画布，我想绘制一个矩形，其中有一个矩形孔，并且不填充孔而是填充其他形状。我知道一种方法是绘制一个矩形，然后使用较大的线宽对其进行描边，并使用图案或其他方式对其进行描边。但我不想把它作为一笔，而是作为填充。

Answer 1

一种方法是在带有孔切口的单独画布上绘制矩形。然后将其绘制在原始画布上。

此代码用渐变填充画布作为背景。然后，在另一个画布中，用红色填充画布并剪出一个正方形。然后它在第一个画布上绘制第二个画布。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);

let tempCanvas = document.createElement("canvas");
tempCanvas.width = 500;
tempCanvas.height = 500;
let tempCtx = tempCanvas.getContext("2d");

tempCtx.fillStyle = "black";
tempCtx.fillRect(100, 10, 150, 150);

tempCtx.globalCompositeOperation = "source-out";

tempCtx.fillStyle = "red";
tempCtx.fillRect(0, 0, 500, 500);

ctx.drawImage(tempCanvas, 0, 0);

<canvas width="500" height="200"></canvas>