Question

我有一个形状，让我们说：

var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
canvas.fillStroke(this);

每次形状都可能不同。

我有10个蓝色渐变，并希望随着时间的推移随机绘制形状中包含的像素。

我不知道如何获取形状中包含的像素列表，以便我可以编辑它们。

另外我认为每帧重绘可能会影响性能。

任何想法我会如何继续这个？谢谢！ :)

Answer 1

由于下面的问题，您的解决方案实际上有点复杂！

问题：

您需要一个KineticJS形状对象来绘制自定义形状。
Shape只允许在其drawFunc中使用1个单独的context.beginPath。
Html Canvas只允许您为每个beginPath设置1个fillStyle（填充颜色）。
这意味着你只能填充1种单一蓝色 - 而不是10种蓝色。

解决方案：

您可以将形状设为裁剪区域。
然后使用另一个背景画布显示剪裁的形状。
背景画布将用于有效地绘制所有蓝色阴影中的单个像素！

enter image description here

要绘制随机像素并仍覆盖所有像素，请创建“地图”数组：

创建一个数组，其中包含舞台上每个像素的索引号。（randomPixels []）
随机化数组。
使用包含每个像素索引的随机数组，一次一个地绘制随机像素。

这是创建地图数组的功能：

  // make an array with elements from 0 to shapeWidth*shapeHeight in random order

  function initPixelArray(shapeWidth,shapeHeight){
      var array=[];
      var i;
      var countdown;
      var temp;

      // Must be a better way to fill an array with
      // a sequential group of numbers, just in random order
      // Anyone got some magic for this ????????????

      // fill array with sequential numbers representing each pixel;
      for(var i=0;i<shapeWidth*shapeHeight;i++){ array.push(i); }
      // randomize the array
      countdown=array.length;
      while (countdown > 0) {
          i = (Math.random() * countdown--) | 0;
          temp = array[countdown];
          array[countdown] = array[i];
          array[i] = temp;
      }
      //
      return array;
  }

接下来创建自定义KineticJS形状：

将自定义形状定义为剪裁区域（在drawFunc中）
DrawImage背景画布（将包含不断更新的像素）
由于它被裁剪，背景画布只会在您的自定义形状中可见。

这会使用您的形状作为画布背景的剪切路径来创建自定义动态形状

        var shape = new Kinetic.Shape({
          drawFunc: function(canvas){
              var context = canvas.getContext();
              context.beginPath();
              context.moveTo(0, 50);
              context.lineTo(220, 80);
              context.quadraticCurveTo(100, 100, 60, 170);
              context.closePath();
              context.clip();
              context.drawImage(this.backgroundCanvas,0,0);
              canvas.fillStroke(this);  
          },
          x: x,
          y: y,
          stroke: "lightgray",
          strokeWidth: 8,
          draggable:true
        });

将10种颜色逐个像素地设置为您的形状

使用彩色像素逐渐填充背景画布。
由于背景画布是“内置”动态形状，所以您只需在画布上绘制一个像素，然后调用layer.draw以使更改在您的形状中可见。

此功能使用10种蓝色

将多批随机放置的像素添加到背景中

  // add pixels to the background canvas
  // after layer.draw the new pixels will be visible in the shape
  function updatePattern(){

      // add 10 pixels of each type of blue (100px total)
      for(var n=0;n<shapeWidth/8;n++){

          // set a blue color
          tempCtx.fillStyle=color[n];
          tempCtx.beginPath();

          // draw 10 random pixels in that blue
          for(var b=0;b<10;b++){

              // get next random pixel
              var i=randomPixels[nextPixel]
              // calculate x/y from i
              var y=Math.floor(i/shapeWidth);
              var x=(i-y*shapeWidth)-1;
              // draw
              tempCtx.rect(x,y,1,1);
              // increment array index and do bounds check
              if(++nextPixel>=randomPixels.length){return;}

          }
          // done filling with this blue--do the fill()
          tempCtx.fill();
      }
  }

注意：为了保持高性能 - 并且为了保持观众的耐心（！），我一次绘制了一批像素。

保持适当的蓝色混色。

当然，你会根据自己的喜好设计风格。

这是代码和小提琴：http://jsfiddle.net/m1erickson/zhatS/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
  height:300px;
}
canvas{border:1px solid red;}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    // the KineticJS shape
    var myShape;

    // 
    var shapeWidth=stage.getWidth();
    var shapeHeight=stage.getHeight();

    // temporary canvas to create/update the pattern for the Shape
    var tempCanvas=document.createElement("canvas");
    var tempCtx=tempCanvas.getContext("2d");
    tempCanvas.width=shapeWidth;
    tempCanvas.height=shapeHeight;

    // an array of pixel references from 0 to shapeWidth*shapeHeight
    // used to draw individual pixels randomly
    var randomPixels=initPixelArray(shapeWidth,shapeHeight);
    var nextPixel=0;

    // shades of colors to fill with
    var color;
    var colors={
      blues:["#0000ff","#2b60de","#4863a0","#2554c7","#000080","#afdcec","#c6deff","#6698ff","#c2dfff","#79baec"],
      reds:["#ff0000","#f4c3c2","#fd5c5c","#fe2625","#ff3030","#ff6666","#fa8072","#efc3bf","#ff6347","#ef7942"]
    }

    // Create a KineticJS shape
        function kShape(x,y){
          var shape = new Kinetic.Shape({
            drawFunc: function(canvas){
                var context = canvas.getContext();
                context.beginPath();
                context.moveTo(0, 50);
                context.lineTo(220, 80);
                context.quadraticCurveTo(100, 100, 60, 170);
                context.closePath();
                context.clip();
                context.drawImage(this.backgroundCanvas,0,0);
                canvas.fillStroke(this);  
            },
            x: x,
            y: y,
            stroke: "lightgray",
            strokeWidth: 8,
            draggable:true
          });
          // let the shape keep a reference to the background canvas
          shape.backgroundCanvas=tempCanvas;
          layer.add(shape);
          layer.draw();
          return(shape);
        }


    // make an array with elements from 0 to shapeWidth*shapeHeight in random order
    function initPixelArray(shapeWidth,shapeHeight){
        var array=[];
        var i;
        var countdown;
        var temp;

        // Must be a better way to fill an array with
        // a sequential group of numbers, just in random order
        // Anyone got some magic for this ????????????

        // fill array with sequential numbers representing each pixel;
        for(var i=0;i<shapeWidth*shapeHeight;i++){ array.push(i); }
        // randomize the array
        countdown=array.length;
        while (countdown > 0) {
            i = (Math.random() * countdown--) | 0;
            temp = array[countdown];
            array[countdown] = array[i];
            array[i] = temp;
        }
        //
        return array;
    }


    // add pixels to the pattern
    function updatePattern(){

        // add 10 pixels of each type of blue (100px total)
        for(var n=0;n<shapeWidth/8;n++){

            // set a blue color
            tempCtx.fillStyle=color[n];
            tempCtx.beginPath();

            // draw 10 random pixels in that blue
            for(var b=0;b<10;b++){

                // get next random pixel
                var i=randomPixels[nextPixel]
                // calculate x/y from i
                var y=Math.floor(i/shapeWidth);
                var x=(i-y*shapeWidth)-1;
                // draw
                tempCtx.rect(x,y,1,1);
                // increment array index and do bounds check
                if(++nextPixel>=randomPixels.length){return;}

            }
            // done filling with this blue--do the fill()
            tempCtx.fill();
        }
    }


    // great cross-browser animation shim by Paul Irish
    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
    })();


    // animate filling of pixels
    var fps = 60;
    function animate() {
        setTimeout(function() {
            requestAnimationFrame(animate);

            if(nextPixel>=randomPixels.length){return;}

            updatePattern();

            layer.draw();

        }, 1000 / fps);
    }


    ////////////////// ACTION STARTS HERE

    var myShape=kShape(20,20);

    $("#blues").click(function(){ 
        color=colors.blues;
        nextPixel=0; 
        animate(); 
    });

    $("#reds").click(function(){ 
        color=colors.reds;
        nextPixel=0; 
        animate(); 
    });



}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
    <button id="blues">Fill blues</button>
    <button id="reds">Fill reds</button>
</body>
</html>

Answer 2

如果您想知道画布中像素的x，y，您可以使用如下所示的循环：

var image = context.getImageData(0, 0, width, height),
    data = image.data;
for( var x = 0; x < width; x++ ) {
  for( var y = 0; y < height; y++) {
    var i = (x*4)+(y*4*image.width);
    data[i] = ..; // I am the red
    data[i+1] = ..; // I am the green
    data[i+2] = ..; // I am the blue
    data[i+3] = ..; // I am the alpha
  }
}

如果x / y定位不重要，您可以将其减少到单个循环（与之前相同的设置）。

for( var i = 0; i < data.length; i+=4) {
  data[i] = ..; // I am the red
  data[i+1] = ..; // I am the green
  data[i+2] = ..; // I am the blue
  data[i+3] = ..; // I am the alpha
}

然后你想要将图像重新绘制到画布上。

context.putImageData(image, 0, 0);

putImageData有点贵，但如果你操纵渐变，这似乎是我找到的最快的路线。

Answer 3

我不知道您对图搜索有多熟悉，但广度优先搜索或深度优先搜索可能会对您有所帮助。您需要知道的只是一个100％形状的起始像素。

编辑：我做了一些搜索，this algorithm基本上就是我提出的那个。

HTML5 Canvas - 使用随机像素颜色填充形状？

3 个答案: