Question

我已经制作了一个程序来制作在顶部和左侧产生较小正方形的正方形，这些正方形比它们形成的形状小但是在控制它们的尺寸变体方面存在问题。

可以找到实时代码 jsfiddle link

制作正方形的主要功能：

function createCubes(maxX, maxY, minX, minY,lastColor) 
{
if (maxX - minX < 50 || maxY - minY < 50 ) 
{
  return;
}
//var decayRate = .5;
var x = getNumber(minX+50, maxX-50);
var y = getNumber(minY+50, maxY-50);
var width = maxX - x;
var height = maxY - y;
var color;
do
{
        color = getNumber(0, colors.length);
}
while(color == lastColor);
var tempCube = new Cube(color, x, y, width, height);
cubes.push(tempCube);
createCubes(maxX, y, x, minY,color);
createCubes(x, maxY,minX, y,color);

}

我尝试增加min并减去放入getNumber函数的最大值但是它导致了正方形超出范围。

是的我知道我在程序中称他们为立方体。

如果您需要任何解释性评论，我会尽快找到它。

感谢您的帮助！

更新：我发现当减去最大值并将基础追逐设置为减去的数量时，有助于保持它们更好但是你不会得到更多。

更新

添加颜色并尝试控制方块。它们仍然以无法控制的速度腐烂

Answer 1

使用requestAnimationFrame作为计时循环。 rAF会自动发送一个时间戳参数，您可以使用该参数来控制矩形的绘制速率（衰减率）。

以下是带注释的代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var rectSize=100;
var rectResizing=0.75;
var rectX=0;
var nextTime=0;
var decayDelay=500;
var decayRate=0.95;
var loopCount=0;
var labelY=150;

requestAnimationFrame(decayLoop);

function decayLoop(time){
    // wait for elapsed time
    if(time<nextTime){requestAnimationFrame(decayLoop);return;}
    // reset for nextTime
    nextTime=time+decayDelay;
    // update the decay
    decayDelay*=decayRate;
    // draw the decayed rect
    ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);
    ctx.fillRect(rectX,20,rectSize,rectSize);
    rectX+=rectSize;
    rectSize*=rectResizing;
    // display current decayDelay & rectSize
    //ctx.clearRect(0,0,cw,40);
    ctx.fillStyle='black';
    ctx.fillText('Loop count: '+(loopCount++)+', RectSize: '+parseInt(rectSize)+', DecayDelay: '+decayDelay,10,labelY);
    labelY+=12;
    // request another loop
    if(rectSize>=1){
        requestAnimationFrame(decayLoop);
    }else{
        alert('End: Rect size has decayed below 1px');
    }
}

＆＃13;

#canvas{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="canvas" width=512 height=512></canvas>

＆＃13;

控制程序生成方块变量和衰减

1 个答案: