如何在JavaScript中写下此基本的油漆语句

Question

在基本中，有一个称为paint的命令，看起来像这样：

PAINT (column, row), color, color-stop

它需要X/Y坐标作为起点，并开始填充它，并用颜色填充周围的像素，直到达到颜色停止的颜色为止。值的示例可能是：

PAINT (200, 400), 4, 6

QuickBasic使用0-15代表不同的颜色。这些颜色中的每一个都有等效的十六进制值。

在油漆之前的线条中，通常有线条，圆形等。绘制了不同（颜色停止）颜色，这些颜色为油漆命令实际使用的屏幕空间设定了数量。

关于如何在JavaScript中完成类似事情的任何想法？

Answer 1

我改编了我在此处找到的解决方案：http：//www.williammalone.com/articles/html5-canvas-javascript-paint-paint-paint-bactet-tool/

它像扫描线一样工作，并在阻塞路径时会创建节点以将扫描返回到另一个方向，这是" PixelStack"。

通常，我所看到的所有好解决方案都涉及创建一堆被阻止的位置以返回到填充算法的路径基本上是分叉的。

        function fill(startX,startY,fcol,bcol,vram){
            // This function adapted from code at:
            // http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/
            // and https://github.com/williammalone/HTML5-Paint-Bucket-Tool/blob/master/html5-canvas-paint-bucket.js
            // Copyright 2010 William Malone (www.williammalone.com)
            //
            // Thanks William, yours works better than mine did. :)
            //
            // Licensed under the Apache License, Version 2.0 (the "License");
            // you may not use this fill function except in compliance with the License.
            // You may obtain a copy of the License at
            //
            //   http://www.apache.org/licenses/LICENSE-2.0
            //
            // Unless required by applicable law or agreed to in writing, software
            // distributed under the License is distributed on an "AS IS" BASIS,
            // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
            // See the License for the specific language governing permissions and
            // limitations under the License.
            var pixelStack = [[startX, startY]];
            var startColor = point(startX,startY,vram);
            while(pixelStack.length)
            {
              var newPos, x, y, pixelPos, reachLeft, reachRight;
              newPos = pixelStack.pop();
              x = newPos[0];
              y = newPos[1];
              pixelPos = (y*canvasWidth + x);
              while(y-- >= 25 && matchStartColor(pixelPos,startColor,vram))
              {
                pixelPos -= canvasWidth;
              }
              pixelPos += canvasWidth;
              ++y;
              reachLeft = false;
              reachRight = false;
              while(y++ < canvasHeight-1 && matchStartColor(pixelPos,startColor,vram))
              {
                colorPixel(pixelPos,fcol,vram);
                if(x > 0)
                {
                  if(matchStartColor(pixelPos - 1,startColor,vram))
                  {
                    if(!reachLeft){
                      pixelStack.push([x - 1, y]);
                      reachLeft = true;
                    }
                  }
                  else if(reachLeft)
                  {
                    reachLeft = false;
                  }
                }
                if(x < canvasWidth-1)
                {
                  if(matchStartColor(pixelPos + 1,startColor,vram))
                  {
                    if(!reachRight)
                    {
                      pixelStack.push([x + 1, y]);
                      reachRight = true;
                    }
                  }
                  else if(reachRight)
                  {
                    reachRight = false;
                  }
                }
                pixelPos += canvasWidth;
              }
            }
            function matchStartColor(pixelPos,startColor,vram)
            {
              return (vram[pixelPos]==startColor);
            }
            function colorPixel(pixelPos,col,vram)
            {
              pset(pixelPos%320,Math.floor(pixelPos/320),col,vram)
            }
        }