javascript - 用粒子 Canvas 填充形状

Question

只是想知道是否有人可以为我指出一个好的方向，即我可以用粒子填充不规则形状，成行，然后可以动画化。

这是我能找到的最接近的例子 - http://www.wkams.com/#!/work/detail/coca-cola-music-vis

我认为可行的两种方法是计算出我想要的密度，绘制出每行需要多少粒子，并相应地定位。这种方式似乎很及时，而且不是很健壮。

第二种方法，我似乎不知道该怎么做，是在 Canvas 上绘制形状，然后用粒子生成地填充形状，使它们保持在形状的约束中。

任何关于如何做到这一点的一般概念将不胜感激。

让我知道这是否没有意义。

干杯

Answer 1

您可以使用合成将粒子限制在不规则形状内



对于动画的每个循环:

清除 Canvas 。

在 Canvas 上画出不规则的形状。

将合成设置为“source-atop”。只有当任何新绘制的像素位于现有的不透明像素之上时，这才会导致出现任何新的绘图。这是将粒子限制为仅在不规则形状内绘制的秘诀。

画出你的粒子行。所有粒子将仅出现在形状内部。

这是示例代码和演示。我的示例只是为每个粒子行的大小设置动画。您可以应用您的设计要求来更改每行的大小和位置。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
//
ctx.fillStyle='skyblue';

var PI2=Math.PI*2;
//
var w=132;
var h=479;
//
var x1=29;
var x2=177;
var x3=327;
//
var nextTime=0;
var delay=16*2;
var isFading=true;
var isComplete=false;
var opacity=100;

var imgCount=2;
var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/multple/coke.png";
var label=new Image();label.onload=start;label.src="https://dl.dropboxusercontent.com/u/139992952/multple/label.png";
function start(){
  console.log(imgCount);
  if(--imgCount>0){return;}

  requestAnimationFrame(animate);

  $('#again').click(function(){
    nextTime=0;
    delay=16*2;
    opacity=100;
    isFading=true;
  });
}

function overlay(clipX,x,alpha){
  ctx.globalAlpha=alpha;
  ctx.drawImage(img,clipX,0,w,h,x,0,w,h);
}

function fillParticles(radius,margin){
  var rr=radius*2+margin;
  ctx.save();
  ctx.clearRect(0,0,cw,ch);
  overlay(x3,50,1.00);   
  ctx.globalCompositeOperation='source-atop';
  ctx.beginPath();
  var rows=parseInt(ch/(rr))-2;
  var cols=parseInt(cw/rr);
  for(var r=0;r<rows;r++){
    for(var c=0;c<cols;c++){
      ctx.arc(c*rr,h-(r*rr),radius,0,PI2);
      ctx.closePath();
    }}
  ctx.fill();
  ctx.restore();
  overlay(x2,50,1.00);
}

function animate(time){

  if(!isComplete){ requestAnimationFrame(animate); }

  if(time<nextTime){return;}

  if(isFading){
    if(--opacity>0){
      ctx.clearRect(0,0,cw,ch);
      overlay(x1,50,opacity/100);
      overlay(x2,50,1.00);
    }else{
      isFading=false;
      overlay(x2,50,1.00);
      ctx.drawImage(label,70,210);            
      nextTime=time+1000;
    }
  }else{
    delay=1000;
    fillParticles(parseInt(Math.random()*8)+2,3);         
    ctx.drawImage(label,70,210);            
    nextTime=time+delay;
  }

}

body{ background-color:white; padding:10px; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=again>Again</button>
<br>
<canvas id="canvas" width=250 height=500></canvas>