javascript - 在 HTML 中映射色彩空间

标签 javascript html css canvas svg

所以我正在尝试在 HTML 中映射颜色空间,但我的知识非常局限于 CSS HTML 和 Javascript。我正在寻找一种构建二维梯度的方法,其中 2 个变量沿 2 个向量。我的研究表明 CSS 和 SVG 技术只能处理单维图形。或者更确切地说,Linear Grads 只能有一个向量。因此,为了弥补这个限制,我使用 JS 来迭代我需要的 256 个更改,以便我可以在 2 个 RGB 颜色 channel 上获得渐变。因此,如果您想要一个相对于示例目的的 x 轴 - 红色和从 0 到 255 的渐变以及同样相对的 y 轴 - 绿色和从 0 到 255 的渐变,但使用 JS 迭代而不是 CSS 线性-毕业。

我最终得到的是 RGB 色彩空间的美丽表现!但是!更改 z 轴 - 本例中的蓝色 channel - 意味着我必须调用一个 JS 函数,该函数迭代 256 个循环,用新的 CSS 线性渐变更新 256 个 DOM 元素的背景。

我正在制作这个网络应用程序,因为我看到当前基于网络的颜色选择器的局限性,每次 Z 轴变化的 256 步循环都会给程序带来 Not Acceptable 计算开销。

关于制作双向量渐变的更好方法有什么想法吗?也许我可以为 HTML 5 canvas 元素制作一个特定于应用程序的库???在位图而不是 DOM 元素上操作的位置可能会显着降低每次调用的处理器成本?

最佳答案

您可以使用 canvas的元素。 Here are some examples of colorpickers .

关于javascript - 在 HTML 中映射色彩空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8505528/

相关文章:

javascript - React 关注子组件输入

javascript - 更改标签颜色

javascript - 选择上传文件或输入自定义 URL - HTML 表单

html - 为什么 box-sizing 不会是 : border-box; work when applied to the container in 960. gs?

javascript - 一个完美的 Angular Material 底部导航栏。有没有我缺少的组件?

javascript - 元素 z-index css 属性

javascript - 如何获取另一个 View 中元素的引用ID - UI5

javascript - 使用 Angular 和 ng-repeat 向 HTML DIV 添加属性

javascript - 如何使用 JSX 将动态 HTML 元素附加到 React 组件?

jquery - 在 jquery 中构建动态列表并丢失 CSS