相关疑难解决方法(0)

编辑:我不一定需要解决这个问题 - 而是我想了解它为什么会发生.我不明白为什么我应该得到以下奇怪的结果......

虽然这个问题是针对我在HTML5画布应用程序中遇到的问题,但我认为问题不那么具体.

我有一个HTML5画布应用程序,允许您在屏幕上标记图像.这些图像是32位PNG,所以我正在使用透明度.如果我在同一位置多次(大约100)标记高度透明的图像,我最终会得到一个绝对可怕的结果:

我用作图章的图像的颜色和我正在加盖RGB(167, 22, 22)的背景是RGB(255, 255, 255).这是源图像,如果有人感兴趣:

如您所知,图像的alpha级别极低.可能左右2/255 to 5/255左右.我期望发生的是,如果你反复将图像标记重复应用到画布上,你将获得颜色像素RGBA(167, 22, 22, 255).不幸的是,我得到了一个混合的颜色袋,包括一些非常奇怪的灰色区域,其值为RGB(155, 155, 155).

我只是加载Excel并插入了源代码alpha混合的等式(维基百科参考),我似乎在RGB(167, 22, 22)经过足够的迭代后收敛.我可能遗漏了一些关于alpha混合操作的基本知识以及HTML5 canvas如何实现源代码合成...任何人都可以帮助理顺我吗？

谢谢!

注意:这个问题与我的问题类似,但我不太明白为什么我得到了我在这里发布的结果.

请看这个例子：http : //codepen.io/anon/pen/QNGzBP

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// set pixel at 0,0 to rgba(2, 0, 255, 0.2)
const imageData = ctx.getImageData(0, 0, 1, 1)
imageData.data[0] = 2
imageData.data[1] = 0
imageData.data[2] = 255
imageData.data[3] = 0.2 * 255 // 0.2 opacity
ctx.putImageData(imageData, 0, 0, 0, 0, 1, 1)
console.log('Setting pixel 0,0 to', {
  r: imageData.data[0],
  g: imageData.data[1],
  b: imageData.data[2],
  a: imageData.data[3] / 255
})

// retrieve pixel at 0,0
const newImageData = ctx.getImageData(0, 0, 1, …