javascript - 如何为使用栏的 Canvas 渲染选择渐变颜色？

Question

我正在尝试使用 HTML5 Canvas 的功能为我的 Google Chrome 扩展程序中的使用栏着色。栏本身是一个简单的 DIV:

<div id="idUsgBar"></div>

使用此 CSS:

#idUsgBar{
    margin: 0;
    padding: 0;
    background: -webkit-canvas(bkgfill);
}

所以工作是在 JS 中完成的:

//'perc' = percent value from [0 to 100]
//'w' = width of the bar for 100%
//'h' = height of the bar

var w_f = w * perc / 100;

var ctx = document.getCSSCanvasContext("2d", "bkgfill", w, h);
ctx.clearRect(0, 0, w, h);

//The issue is calculating r, g, b components for the fill based on 'perc'???
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

ctx.fillRect(0, 0, w_f, h);

因此，我在 Photoshop 中创建了一个如下所示的渐变，但我认为可以简单地将 R 组件设置为与 perc 的值成比例的想法是完全错误的。该图将说明我的意思:

那么有什么方法可以实现呢？

Answer 1

我能够通过执行以下操作解决此问题:

1. 在 Photoshop 中使用所需的渐变/颜色图案创建一像素高的 PNG。 (在上面的示例中称为“颜色来源”。)

2. 将其作为不可见的添加到页面 <img>其 CSS 样式设置为 display: none; .

3. 然后，要获取百分比值的“使用栏”颜色，只需从 <img> 中进行采样即可。使用canvas 。首先加载 drawImage () 然后使用 getImageData 获取像素的 RGB 分量()。

PS。为了加快速度，我缓存了 <img> 中的所有必需像素。页面加载时在全局数组中，因此我可以稍后在绘制“使用栏”时使用它来检索 RGB 值。