Javascript颜色和画布中的问题答案

【问题标题】：Problem in Javascript colors and canvasJavascript颜色和画布中的问题
【发布时间】：2010-10-26 01:30:43
【问题描述】：

我已经使用这个代码来精确地尝试拥有颜色的 RGB 代码：

var huePixel = HueCanvas.css('background-color').match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);//["rgb(0, 70, 255", "0", "70", "255"]
var svPixel = SVCanvas.get(0).getContext("2d").getImageData(satPos,valPos,1,1).data;
//opacity*original + (1-opacity)*background = resulting pixel
var opacity =(svPixel[3]/255);
var r =parseInt((opacity*svPixel[0])+((1-opacity)*huePixel[1]));
var g =parseInt((opacity*svPixel[1])+((1-opacity)*huePixel[2]));
var b =parseInt((opacity*svPixel[2])+((1-opacity)*huePixel[3]));

问题在于，在某些像素中，RGB 并不完全相同。如果我使用 Math.round 而不是 parseInt 会有更多的问题，而且更多的像素与真实像素相比变化不大。

我知道问题出在var opacity =(svPixel[3]/255);，但我不知道如何把方程式放在没有问题的地方。

感谢您的关注。

【问题讨论】：

设置不透明度前svPixel的值是多少？
svPixel[3] 从 0 运行到 255。
您是只更改一个像素，还是打算将整个画布内容与背景混合？如果您将画布像素设置为不透明度
是的，但我需要的是取一个像素的颜色而不是所有画布的颜色。我试图不混合它，因为每次我改变颜色都必须改变它。但我认为生病必须这样做。我看到的唯一问题是内存可以让 javascript 和 canvas 多次改变颜色。

标签： javascript html canvas

【解决方案1】：

我不知道你的问题的确切答案（我什至不确定我是否理解问题本身），但我会试一试。

您似乎正在尝试计算当其他东西（浏览器？）在不透明背景上混合不透明画布时看到的 RGB 值。（你确定这是正确的做法吗？）

首先，请不要使用parseInt 对数字进行四舍五入。它使用了to parse strings，您应该使用它将huePixel[i] 转换为整数：parseInt(huePixel[i], 10)（请注意，我明确指定了基数以避免将数字解析为八进制）。

要对值进行四舍五入，您应该使用Math 方法：Math.round（最接近的整数）、Math.ceil（向上舍入）或Math.floor（向下舍入）。

也许您遇到的问题是由舍入误差引起的（如果没有具体的输入和计算的预期输出，很难说）。为了尽量减少舍入误差，您可以尝试像这样重写公式：

(opacity * svPixel[0]) + ((1-opacity) * huePixel[1]) =
  huePixel[1] + opacity * (svPixel[0]-huePixel[1]) =
  huePixel[1] + svPixel[3] * (svPixel[0]-huePixel[1]) / 255

【讨论】：