8-21 13,176 views
不久前看到宝洁公众号一个利用canvas+flood fill（也就是洪水填充）涂色的H5页，觉得挺好玩有空的时候也写了两个涂色页，下面给出demo和完整参考代码下载，献给html5前端爱好者：
演示地址：http://wx.karlew.com/bear/
完整代码：https://github.com/karlew/canvas-flood-fill
下载的源码在本地用谷歌浏览器预览时，会出现 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D' 的错误（具体原因可百度），建议用火狐或IE浏览器浏览，或者用php等代替html页面，又或者上传到服务器查看。
你好 我这边试玩一下你的游戏 发现一个BUG 当大部分的颜色相同时 当我选择别的颜色去改变其中的一个区域时 会是这大部分的颜色一起改变了 请问你有什么办法避免这个BUG
你好，刚刚检查了一下，发现在点击到黑色线条时，会把所有黑色线改成所选择的颜色，所以在大部分颜色相同时，由于没有了黑色线条阻隔，换其他颜色填充时，会填充失去阻隔的相同颜色的大区域。（试试把id=”wire”的div隐藏掉，再涂一下线条就可以看到这bug）
解决办法是禁止点击线条区域，不过暂时想不到用什么方法去识别线条，如果禁止用户点击黑色即线条的颜色，那以后需要填充黑色时就有冲突了，或者当线条颜色不是黑色而是例如红色时，禁止点击红色区域似乎很不妥。
有时间会想法修正一下，总之谢谢反馈。