0

我可能在这里做了一些愚蠢的事情，但我很难让 alpha 值在 Canvas 中进行合作。我正在尝试从画布上的一个点采样不透明的颜色，使其更透明，然后将其放在另一个点上——但 alpha 部分似乎不起作用。剥离它有点像这样（从散布在脚本中的函数浓缩）：

p = ground.ctx.getImageData(loc.x, loc.y, 1, 1).data; 
col = {R: p[0], G: p[1], B: p[2], a: p[3]};
col.a = col.a - 0.1;
ground.ctx.fillStyle = 'rgba(' + col.R + ', ' + col.G + ', ' + col.B + ', ' + col.a + ')';
ground.ctx.fillRect(nuLoc.x, nuLoc.y, sqrSize, sqrSize);

这一切都运行了，但是当我测试 fillStyle 的值时，我只得到一个标准的 RGB“#fa674c”或其他任何东西——没有提到任何 alpha——当我从新绘制的 Rect 中获取图像数据（）时，该值再次完全不透明.

我无法通过经验或阅读每个教程（和规范）来弄清楚的另一件事是 alpha 是否希望为 0-1.0 或 0-255。大多数消息来源都在谈论 0-1.0 ——但 getImageData() 返回 0-255 ......我无法让它工作。

4

1 回答 1

0

使用 context.globalAlpha 而不是使用 rgba 填充：

p = ground.ctx.getImageData(loc.x, loc.y, 1, 1).data; 
col = {R: p[0], G: p[1], B: p[2], a: p[3]};

// note: globalAlpha uses a scale of 0-1
// and getImageData uses a scale of 0-255
ground.ctx.globalAlpha = a/255-.1;

ground.ctx.fillStyle = 'rgb(' + col.R + ', ' + col.G + ', ' + col.B + ')';
ground.ctx.fillRect(nuLoc.x, nuLoc.y, sqrSize, sqrSize);

// reset globalAlpha when you're done
ground.ctx.globalAlpha = 1;
于 2013-04-05T22:15:13.250 回答