当前位置：首页 > JavaScript

js 实现圆角

2026-02-01 07:48:34JavaScript

实现圆角的方法

在JavaScript中实现圆角效果通常需要操作DOM元素的样式属性。以下是几种常见的方法：

使用style属性直接设置

通过修改元素的style.borderRadius属性来设置圆角：

const element = document.getElementById('myElement');
element.style.borderRadius = '10px';

使用CSS类切换

定义一个CSS类并在需要时添加到元素上：

js 实现圆角

.rounded {
  border-radius: 15px;
}

document.getElementById('myElement').classList.add('rounded');

动态创建样式规则

通过JavaScript动态创建样式规则并应用到文档：

const style = document.createElement('style');
style.innerHTML = `
  .dynamic-rounded {
    border-radius: 20px;
  }
`;
document.head.appendChild(style);
document.getElementById('myElement').classList.add('dynamic-rounded');

使用canvas绘制圆角

对于canvas元素，可以使用arcTo方法绘制圆角矩形：

js 实现圆角

function drawRoundedRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
  ctx.fill();
}

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
drawRoundedRect(ctx, 10, 10, 100, 100, 15);

设置不同方向的圆角

可以单独设置四个角的圆角半径：

const element = document.getElementById('myElement');
element.style.borderRadius = '10px 20px 30px 40px';

使用百分比值

圆角半径也可以使用百分比值：

document.getElementById('myElement').style.borderRadius = '50%';

动态计算圆角值

根据元素尺寸动态计算圆角值：

const element = document.getElementById('myElement');
const radius = Math.min(element.offsetWidth, element.offsetHeight) * 0.1;
element.style.borderRadius = `${radius}px`;

以上方法可以根据具体需求选择使用，其中直接修改style属性是最简单直接的方式，而使用CSS类则更易于维护和复用。对于canvas绘图，需要手动计算路径来实现圆角效果。