如何在矩形画布中着色

Question

我正在创建一个非常类似于Paint的应用程序，它有一个绘制线条的按钮，一个插入矩形，椭圆等等。这个应用程序还有一个桶按钮，如果我点击它，它应该绘制已插入画布的矩形/椭圆内的区域。

我有办法做到这一点吗？

Answer 1

您需要执行洪水填充。

HTML5画布不提供开箱即用的功能，因此您必须自己动手。

1. 使用var imagedata = context.getImageData(0, 0, canvas.width, canvas.height)获取一个ImageData对象，该对象代表画布的原始像素数据。
2. RGBA值在imagedata.data中。它是一维数组，其中每个像素由四个值表示。要获取/设置特定像素的颜色值，请使用imagedata.data[x + y * imagedata.width + offset]，其中偏移为0,1,2或3，用于红色，绿色，蓝色或alpha。
3. 对数据执行flood-fill算法
4. 使用context.putImageData(imagedata, 0, 0)将修改过的imagedata结构写回画布。