如何用CSS Paint API实现两个圆形背景重叠并叠加内容？-css教程-PHP中文网

如何用CSS Paint API实现两个圆形背景重叠并叠加内容？

碧海醫心

发布： 2025-03-13 18:38:11

原创

1007人浏览过

如何用css paint api实现两个圆形背景重叠并叠加内容？

利用CSS Paint API打造炫酷圆形重叠背景效果

本文将演示如何使用CSS Paint API创建两个重叠的圆形背景，并在其上叠加文本和图片。此效果无法简单通过position: absolute实现，需要借助CSS Paint API绘制自定义图形。

首先，我们需要了解CSS Paint API。它允许开发者使用JavaScript绘制自定义背景图案，从而实现复杂的视觉效果。通过CSS Paint API，我们可以精确控制圆形的绘制位置、大小和样式，轻松实现两个圆形重叠的效果。

以下代码展示了如何使用CSS Paint API绘制两个重叠的圆形背景，并在其上放置标题和图片：

立即学习“前端免费学习笔记（深入）”；

index.html:

<!DOCTYPE html>
<html>
<head>
<title>CSS Paint API 圆形重叠</title>
<style>
.test {
  background-image: paint(arc);
  width: 200px;
  height: 200px;
  border: 2px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test h1 {
  z-index: 1; /* 保证标题显示在圆形之上 */
}
</style>
</head>
<body>
<div class="test">
  <h1>测试</h1>
  @@##@@
</div>

<script>
if ('paintworklet' in CSS) {
  CSS.paintWorklet.addModule('demo1.js');
} else {
  document.body.innerHTML = '您的浏览器不支持CSS Paint API';
}
</script>
</body>
</html>

登录后复制

demo1.js:

class arc {
  paint(ctx, geom, properties) {
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'cyan';

    ctx.beginPath();
    ctx.arc(geom.width / 2, geom.height / 2, geom.width / 2, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(geom.width / 2, geom.height / 2, geom.width / 2 - 30, 0, 2 * Math.PI);
    ctx.fillStyle = '#fff';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(geom.width / 2, geom.height / 2, geom.width / 2 - 30, 0, 2 * Math.PI);
    ctx.stroke();
  }
}

registerPaint('arc', arc);

登录后复制

这段代码定义了一个名为arc的自定义绘制器，绘制了两个同心圆，内圆填充白色，外圆为青色描边。 background-image: paint(arc); 将其应用于.test元素的背景。 z-index: 1;确保标题显示在圆形之上。请将 "your_image.jpg" 替换为您的图片路径。这段代码需要浏览器支持CSS Paint API才能正常运行。

通过以上步骤，您可以轻松创建具有两个重叠圆形背景的网页元素，并在此基础上添加其他内容。记住将 demo1.js 文件与 index.html 文件放在同一目录下。