如何通过在画布上单击鼠标来消除颜色?

问题描述 投票:2回答:1

我想为我的网站实现背景橡皮擦功能。我为此使用画布。我可以将图像数据放入画布并从画布中获取图像数据。

我实现了泛洪填充算法,用于从特定位置去除颜色。

我在这里尝试过:

`http://jsfiddle.net/Mark_1998/boz43x87/`

[我搜索过多后,发现该算法无法消除黑色,

作为填充算法的规则,如果目标颜色和替换颜色相同,则它将返回功能(无需进一步处理)。>>

就我而言,在这里做的完全一样。简而言之:

  1. 目标颜色:rgba(255,0,0,145)->替换颜色:rgba(0,0,0,0); ->工作正常(删除红色并设置为透明黑色)。
  2. 目标颜色:rgba(0,0,0,255)->替换颜色:rgba(0,0,0,0)=>无法正常工作(原因:我只检查了三种颜色,即R,G,B)] >
  3. 是否有任何方法可以将颜色与其Alpha值进行匹配?

    如果我将新颜色(替换色)替换为任何其他颜色,则当目标颜色与替换色相同时,它将不会从图像中删除该颜色。例如我设置了替换颜色rgba(255,255,255,0)而不是rgba(0,0,0,0),那么它将从图像精细中去除黑色,但不能从图像中去除白色。

删除该颜色的唯一方法是使用其alpha值查找颜色的距离。但是我不知道如何找到那个距离。

请帮助我。

我想为我的网站实现背景橡皮擦功能。我为此使用画布。我可以将图像数据放入画布并从画布获取图像数据。我已经实现了洪水填充算法...

canvas flood-fill
1个回答
0
投票

您可以使用globalAlpha属性更改Alpha值。

ctx.globalAlpha = 0;
© www.soinside.com 2019 - 2024. All rights reserved.