前端在canvas上画的图，如何填充颜色

Question

使用插件在canvas上画的不规则图

现在知道这个不规则图形所有的点
现在改不了插件的的代码
如何后期给这个不规则图形内部填充颜色
有什么办法吗？




里面的arr1就是图中获取到点的格式
填充颜色不生效
arr1是已经知道的所有的点格式是[[x,y],[x,y].........]

Answer 1

先简单回答一下，首先题主肯定是不知道被围起来的像素点是哪些的，问题的难点就在这里，思路大概是这样：

1.获取canvas中所有像素点组成的数组，这个有现成的API: ctx.getImageData
2.得到被围图像内部的一个点，这个应该比较好找，也许可以让用户用鼠标选，或者知道围合图像的颜色值，取其几何中心点（假设图像是凸的，实在不凸也有办法，这不是重点）
3.从这个点出发，用“种子填充”(seed filling)算法找出所有内部的像素点
4.改变数组中内部点的颜色，再写回canvas（ctx.putImageData）

我知道这有点像把大象放进冰箱里，最关键的一步说得太简略了，哈哈哈，不过按名字搜索，还是能找到算法很清晰的说明的。实现可以参考我一个老项目transparentize-image-web，是让用户通过鼠标点击，把图像上颜色相近的像素变透明的。

后面有时间的话，我再撸个直接解决问题的实现代码。

Answer 2

如果知道所有点，可以对每个点修改单个像素

const imageData = ctx.createImageData(1, 1)
// imageData.data[0] = ...
// 默认是透明的
ctx.putImageData(imageData, x, y)

Answer 3

const points = [[1, 1],[14, 11],[31, 41]....]
ctx.beginPath();
ctx.moveTo(...points.pop());
for (const point of points){
  ctx.lineTo(...point);
}
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill()

Answer 4

看看是不是你需要的？
https://segmentfault.com/a/11...