荣誉在CSS油漆API中享受彩色颜色，并具有自定义属性

CSS Paint API与自定义属性：根据用户偏好调整绘画效果

近年来，CSS Paint API一直是令人兴奋的技术。它允许开发者创建自定义的绘画工作单元，并通过CSS控制其渲染方式。结合prefers-color-scheme媒体查询和CSS自定义属性，我们可以根据用户的明暗模式偏好，动态调整绘画工作单元的外观。

本文将以一个Final Fantasy II风格的景观绘画工作单元为例(overworld.js)，演示如何利用CSS自定义属性实现这一功能。

准备工作

首先，需要确保浏览器支持CSS Paint API和自定义属性：

const paintAPISupported = "registerProperty" in window.CSS && "paintWorklet" in window.CSS;

接下来，使用CSS.registerProperty方法定义自定义属性。这些属性将在CSS中定义，并在绘画工作单元中读取，从而方便地控制渲染过程。 overworld.js工作单元使用自定义属性定义了景观中不同部分的颜色（草地、树木、河流等）。 默认值适用于亮模式。

属性注册代码如下：

const properties = {
  "--overworld-grass-green-color": {
    syntax: "<color>",
    initialValue: "#58ab1d"
  },
  "--overworld-dark-rock-color": {
    syntax: "<color>",
    initialValue: "#a15d14"
  },
  // ... 其他属性
};

Object.entries(properties).forEach(([name, { syntax, initialValue }]) => {
  CSS.registerProperty({
    name,
    syntax,
    inherits: false,
    initialValue
  });
});

CSS.paintWorklet.addModule("/worklets/overworld.js");</color></color>

这些属性的初始值可以在用户选择颜色方案时被覆盖。

适应用户偏好的颜色方案

网站设置菜单允许用户选择颜色方案：“系统”、“亮模式”和“暗模式”。 “系统”模式遵循操作系统设置；后两者则分别设置light或dark类到HTML元素上。 CSS变量用于实现颜色方案的切换：

/* 用户选择暗模式 */
html.dark {
  --grass-green: #3a6b1a;
  --dark-rock: #784517;
  // ... 其他颜色
}

/* 系统偏好为暗模式 */
@media screen and (prefers-color-scheme: dark) {
  html {
    --grass-green: #3a6b1a;
    --dark-rock: #784517;
    // ... 其他颜色
  }
}

/* 用户选择亮模式 */
html.light {
  --grass-green: #58ab1d;
  --dark-rock: #a15d14;
  // ... 其他颜色
}

/* 系统偏好为亮模式 */
@media screen and (prefers-color-scheme: light) {
  html {
    --grass-green: #58ab1d;
    --dark-rock: #a15d14;
    // ... 其他颜色
  }
}

在绘画工作单元上设置自定义属性

如果浏览器支持Paint API，则页面中的内联脚本会为元素应用paint-api类。

@media screen and (min-width: 64rem) {
  .paint-api .backdrop {
    background-image: paint(overworld);
    /* ... 其他样式 ... */
    --overworld-grass-green-color: var(--grass-green);
    --overworld-dark-rock-color: var(--dark-rock);
    // ... 其他属性
  }
}

这里，绘画工作单元的自定义属性值取自用户颜色方案偏好对应的CSS变量。 这样就实现了根据用户偏好动态调整绘画工作单元渲染效果的功能。

通过这种方法，可以灵活地控制绘画工作单元的渲染，例如根据颜色方案添加细节或彩蛋。 CSS Paint API结合自定义属性和prefers-color-scheme媒体查询，为开发者提供了强大的工具来创建动态且个性化的用户体验。

以上是荣誉在CSS油漆API中享受彩色颜色，并具有自定义属性的详细内容。更多信息请关注PHP中文网其他相关文章！