js 通过缩放画布来展示超出边界的子元素

可以通过设置 canvas 元素的宽度和高度，以及使用 CSS 缩放属性来实现缩放画布。例如：

HTML 代码：

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

CSS 代码：

#myCanvas {
  width: 500px; /* 设置画布宽度 */
  height: 500px; /* 设置画布高度 */
  transform: scale(2); /* 缩放画布 */
}

JavaScript 代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制超出边界的子元素
ctx.fillRect(-50, -50, 100, 100);

在上述例子中，画布的宽度和高度都设置为 500 像素，同时使用 CSS 的 transform 缩放属性将画布放大了两倍。因此，绘制的矩形会超出画布边界，但由于画布被放大了，因此可以看到完整的矩形。