当前位置：首页 > JavaScript

js实现超大的大括号

2026-01-31 08:31:43JavaScript

使用 CSS 和 SVG 实现超大括号

在 JavaScript 中可以通过动态生成 SVG 或 CSS 样式来创建超大括号效果。以下是两种实现方式：

CSS 实现方案 通过伪元素和边框旋转实现大括号效果：

.big-brace {
  position: relative;
  height: 200px;
  width: 50px;
}

.big-brace::before, .big-brace::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 100px;
  border: 5px solid #000;
  border-radius: 50%;
}

.big-brace::before {
  top: 0;
  border-right: none;
  border-bottom: none;
  transform: rotate(-45deg);
}

.big-brace::after {
  bottom: 0;
  border-left: none;
  border-top: none;
  transform: rotate(-45deg);
}

SVG 实现方案 使用 JavaScript 动态创建 SVG 路径：

function createBigBrace(width, height) {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute('width', width);
  svg.setAttribute('height', height);

  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const curveHeight = height * 0.8;
  const curveWidth = width * 0.4;

  path.setAttribute('d', 
    `M ${width/2} 0 
     Q ${width/2 - curveWidth} ${curveHeight/4}, ${width/2 - curveWidth} ${curveHeight/2}
     Q ${width/2 - curveWidth} ${3*curveHeight/4}, ${width/2} ${curveHeight}
     M ${width/2} 0
     Q ${width/2 + curveWidth} ${curveHeight/4}, ${width/2 + curveWidth} ${curveHeight/2}
     Q ${width/2 + curveWidth} ${3*curveHeight/4}, ${width/2} ${curveHeight}`
  );

  path.setAttribute('stroke', 'black');
  path.setAttribute('fill', 'none');
  path.setAttribute('stroke-width', '5');

  svg.appendChild(path);
  return svg;
}

// 使用示例
document.body.appendChild(createBigBrace(100, 500));

使用 Canvas 绘制大括号

通过 Canvas API 可以更灵活地控制大括号的形状和大小：

function drawBigBrace(ctx, x, y, width, height) {
  const halfWidth = width / 2;
  const halfHeight = height / 2;

  ctx.beginPath();
  ctx.moveTo(x + halfWidth, y);

  // 上半部分曲线
  ctx.bezierCurveTo(
    x + halfWidth - width*0.3, y + height*0.2,
    x + halfWidth - width*0.3, y + halfHeight,
    x + halfWidth, y + halfHeight
  );

  // 下半部分曲线
  ctx.bezierCurveTo(
    x + halfWidth - width*0.3, y + halfHeight,
    x + halfWidth - width*0.3, y + height*0.8,
    x + halfWidth, y + height
  );

  ctx.moveTo(x + halfWidth, y);

  // 上半部分镜像曲线
  ctx.bezierCurveTo(
    x + halfWidth + width*0.3, y + height*0.2,
    x + halfWidth + width*0.3, y + halfHeight,
    x + halfWidth, y + halfHeight
  );

  // 下半部分镜像曲线
  ctx.bezierCurveTo(
    x + halfWidth + width*0.3, y + halfHeight,
    x + halfWidth + width*0.3, y + height*0.8,
    x + halfWidth, y + height
  );

  ctx.lineWidth = 5;
  ctx.stroke();
}

// 使用示例
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 600;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
drawBigBrace(ctx, 50, 50, 100, 500);

使用 Unicode 字符

对于简单的需求，可以直接使用 Unicode 中的大括号字符：

js实现超大的大括号

const bigBrace = document.createElement('div');
bigBrace.style.fontSize = '200px';
bigBrace.style.lineHeight = '1';
bigBrace.textContent = '{'; // 或 '}' 
document.body.appendChild(bigBrace);

这种方法简单但可定制性较差，适合快速实现基本效果。