有没有一种方法可以使用HTML Canvas和JavaScript从点填充到边界为止?

戴夫·麦基

我有一些正在使用的旧基本代码。它是这样的:

PAINT (200, 200), 2, 10

这实际上意味着:用深绿色填充从坐标X 200 Y 200开始的区域,直到该点达到浅绿色的边界颜色,然后停止填充。

这个想法是,可以使用一种颜色绘制轮廓(例如状态),然后用另一种颜色填充整个轮廓。它不会填满整个屏幕,因为轮廓是填充停止处的颜色。

约翰·布皮特

您可以使用洪水填充来填充区域。它以起点(或种子点)作为输入,并通过尝试填充其空的邻居来递归填充该区域。

JavaScript中基于堆栈的简单实现:

// Takes the seed point as input
var floodfill = function(point) {
    var stack = Array();
    stack.push(point); // Push the seed
    while(stack.length > 0) {
        var currPoint = stack.pop();
        if(isEmpty(currPoint)) { // Check if the point is not filled
            setPixel(currPoint); // Fill the point with the foreground
            stack.push(currPoint.x + 1, currPoint.y); // Fill the east neighbour
            stack.push(currPoint.x, currPoint.y + 1); // Fill the south neighbour
            stack.push(currPoint.x - 1, currPoint.y); // Fill the west neighbour
            stack.push(currPoint.x, currPoint.y - 1); // Fill the north neighbour
        }
    }
};

isEmpty(point)是测试点(x, y)是否用边界颜色(在这种情况下为浅绿色)填充的函数

setPixel(point)(x, y)用前景色填充点(在您的情况下为深绿色)。

这些功能实现是微不足道的,我留给您。

上面的实现使用4连接的邻域。但它可以轻松扩展到6个或8个连接的社区。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

有没有一种方法可以使用javascript阻止javascript?

来自分类Dev

有没有一种方法可以使用JavaScript发送CoAP命令?

来自分类Dev

有没有一种方法可以使用SKSpriteNode和PhysicsBody参数使用Spritekit制作软体?

来自分类Dev

有没有一种方法可以使用JavaScript代码而不使用<script>标签?

来自分类Dev

有没有一种方法可以使用STL优雅地填充矩阵(向量的向量)?

来自分类Dev

有没有一种方法可以使用min和max来编写if-else?

来自分类Dev

有没有一种方法可以使用min和max来编写if-else?

来自分类Dev

有没有一种方法可以使Nautilus显示“最近使用过的”文件和目录?

来自分类Dev

有没有一种方法可以使用JS和AngularJS获取HTTP状态代码名称?

来自分类Dev

有没有一种方法可以使用qbsdk和qbxml从Quickbooks脱机删除客户?

来自分类Dev

有没有一种方法可以使用Gradle将Kotlin类编译为JavaScript?

来自分类Dev

有没有一种方法可以使用javascript打开文件(vs下载)?

来自分类Dev

有没有一种方法可以使用javascript打开文件(vs下载)?

来自分类Dev

有没有一种方法可以使用实际的MVC视图和模型来创建HTML文件?

来自分类Dev

有没有一种方法可以使用JavaScript在HTML中更改/添加到多个ID /类?

来自分类Dev

有没有一种方法可以使用AngularJS在没有JavaScript的模型上从ng-repeat绑定$ index的2种方式?

来自分类Dev

有没有一种方法可以使每个模块具有反应,redux和副作用

来自分类Dev

有没有一种方法可以使Lua 5.1填充以支持比较元方法?

来自分类Dev

有没有一种方法可以使依赖项注入和扩展方法进行交互?

来自分类Dev

有没有一种方法可以使用pyplot和pandas绘制所有在Python中仅具有特定值的列?

来自分类Dev

有没有一种方法可以使用barplot或ggplot在同一张图上同时具有barplot和stacked barplot?

来自分类Dev

有没有一种方法可以使表单域和按钮的字体和高度响应?

来自分类Dev

有没有一种方法可以使lodash复制属性获取器和设置器?

来自分类Dev

有没有一种方法可以使此函数计算sd和均值?

来自分类Dev

有没有一种方法可以使鼠标滚轮触发Javascript中的“悬停”事件?

来自分类Dev

有没有一种方法可以使用jQuery和/或CSS通过单击按钮来反转页面上的所有颜色?

来自分类Dev

有没有一种方法可以使用matplotlib绘制具有指定宽度和高度的文本?

来自分类Dev

有没有一种方法可以使用javascript检测元素在哪个CSS网格列和行中?

来自分类Dev

有没有一种方法可以使用javascript和节点模块(oracledb)将csv导入到oracle数据库?

Related 相关文章

  1. 1

    有没有一种方法可以使用javascript阻止javascript?

  2. 2

    有没有一种方法可以使用JavaScript发送CoAP命令?

  3. 3

    有没有一种方法可以使用SKSpriteNode和PhysicsBody参数使用Spritekit制作软体?

  4. 4

    有没有一种方法可以使用JavaScript代码而不使用<script>标签?

  5. 5

    有没有一种方法可以使用STL优雅地填充矩阵(向量的向量)?

  6. 6

    有没有一种方法可以使用min和max来编写if-else?

  7. 7

    有没有一种方法可以使用min和max来编写if-else?

  8. 8

    有没有一种方法可以使Nautilus显示“最近使用过的”文件和目录?

  9. 9

    有没有一种方法可以使用JS和AngularJS获取HTTP状态代码名称?

  10. 10

    有没有一种方法可以使用qbsdk和qbxml从Quickbooks脱机删除客户?

  11. 11

    有没有一种方法可以使用Gradle将Kotlin类编译为JavaScript?

  12. 12

    有没有一种方法可以使用javascript打开文件(vs下载)?

  13. 13

    有没有一种方法可以使用javascript打开文件(vs下载)?

  14. 14

    有没有一种方法可以使用实际的MVC视图和模型来创建HTML文件?

  15. 15

    有没有一种方法可以使用JavaScript在HTML中更改/添加到多个ID /类?

  16. 16

    有没有一种方法可以使用AngularJS在没有JavaScript的模型上从ng-repeat绑定$ index的2种方式?

  17. 17

    有没有一种方法可以使每个模块具有反应,redux和副作用

  18. 18

    有没有一种方法可以使Lua 5.1填充以支持比较元方法?

  19. 19

    有没有一种方法可以使依赖项注入和扩展方法进行交互?

  20. 20

    有没有一种方法可以使用pyplot和pandas绘制所有在Python中仅具有特定值的列?

  21. 21

    有没有一种方法可以使用barplot或ggplot在同一张图上同时具有barplot和stacked barplot?

  22. 22

    有没有一种方法可以使表单域和按钮的字体和高度响应?

  23. 23

    有没有一种方法可以使lodash复制属性获取器和设置器?

  24. 24

    有没有一种方法可以使此函数计算sd和均值?

  25. 25

    有没有一种方法可以使鼠标滚轮触发Javascript中的“悬停”事件?

  26. 26

    有没有一种方法可以使用jQuery和/或CSS通过单击按钮来反转页面上的所有颜色?

  27. 27

    有没有一种方法可以使用matplotlib绘制具有指定宽度和高度的文本?

  28. 28

    有没有一种方法可以使用javascript检测元素在哪个CSS网格列和行中?

  29. 29

    有没有一种方法可以使用javascript和节点模块(oracledb)将csv导入到oracle数据库?

热门标签

归档