当前位置：首页 > JavaScript

js实现圆角

2026-03-14 22:06:52JavaScript

实现圆角的方法

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

直接设置CSS样式

通过JavaScript直接修改元素的style.borderRadius属性：

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

动态添加CSS类

定义一个包含圆角样式的CSS类，通过JavaScript动态添加：

js实现圆角

.rounded-corners {
    border-radius: 15px;
}

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

使用百分比值

border-radius支持百分比值实现椭圆或圆形效果：

// 圆形（元素需为正方形）
element.style.borderRadius = '50%';

单独设置每个角

分别控制四个角的圆角半径：

js实现圆角

element.style.borderTopLeftRadius = '5px';
element.style.borderTopRightRadius = '15px';
element.style.borderBottomLeftRadius = '20px';
element.style.borderBottomRightRadius = '10px';

通过Canvas绘制圆角

使用Canvas API绘制带圆角的矩形：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const radius = 20;

ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(canvas.width - radius, 0);
ctx.quadraticCurveTo(canvas.width, 0, canvas.width, radius);
ctx.lineTo(canvas.width, canvas.height - radius);
ctx.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height);
ctx.lineTo(radius, canvas.height);
ctx.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius);
ctx.lineTo(0, radius);
ctx.quadraticCurveTo(0, 0, radius, 0);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();

响应式圆角调整

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

function updateBorderRadius() {
    const width = element.clientWidth;
    element.style.borderRadius = `${width * 0.1}px`;
}
window.addEventListener('resize', updateBorderRadius);