动画图像连续随机大小

Question

回答了关于随机移动的最后一个话题。但是我的一个问题仍然没有回答。关于如何创建这样的随机图像大小：http://ie.microsoft.com/testdrive/Performance/FishIETank/

那我需要什么？ Math.random 和 for？请建议:)

这是我的工作：http://jsfiddle.net/t9tvnvot/1/

function track(circle, horizontal,vertical,randomly) {
(....)
randomly[0] = Math.random * (circleX + Math.cos(length) * radius); //when i put this, the animation go crazy move
randomly[1] = Math.random * (circleX + Math.sin(length) * radius); //
}

请帮助和教我:)

Answer 1

我认为这很简单......

尝试将 Math.random 更改为 Math.random()，它应该可以工作...

function track(circle, horizontal,vertical,randomly) {
(....)
randomly[0] = Math.random() * (circleX + Math.cos(length) * radius); 
randomly[1] = Math.random() * (circleX + Math.sin(length) * radius);
}

这是从小提琴编辑的代码（这段代码每次都会为蝴蝶生成一个新的位置，可以很远）：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var circleX = 200;
var circleY = 200; 
var radius = 150;
var length = 0;

var setX = 0;
var setY = 0;
var speed = 0.1;

function track(circle, horizontal,vertical) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(5, 5, 490, 490);
//circle track move
circle[0] = Math.random() * (circleX + Math.cos(length) * radius); 
circle[1] = Math.random() * (circleY + Math.sin(length) * radius);


length += speed;

context.beginPath();
var img = new Image();
img.src = "http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211766513.png";
context.drawImage(img, circle[0], circle[1], circle[2], circle[3]);
context.fill();

}
setInterval(function () {
track
([setX, setY, 50, 50], [setX, setY, 50, 50], [setX,setY, 50, 50]);}, 300);

还看到我增加了间隔函数的时间，所以它看起来确实很乱......

这是另一个例子，但是这个代码蝴蝶只出现在前一个位置的vecinity，所以它似乎没有消失：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var length = 0;
var x = 250;
var y = 250;

var setX = 0;
var setY = 0;
var speed = 0.1;

function track(circle, horizontal, vertical) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(5, 5, 490, 490);
//movement
if (x >= 0) {
    if (x <= 450) {
        if (y >= 0) {
            if (y <= 450) {
                if (Math.floor(Math.random() * 4) == 0) {
                    x = x + Math.random() + 15;
                }
                if (Math.floor(Math.random() * 4) == 2) {
                    y = y + Math.random() + 15;
                }
                if (Math.floor(Math.random() * 4) == 1) {
                    x = x - Math.random() - 15;

                }
                if (Math.floor(Math.random() * 4) == 3) {
                    y = y - Math.random() - 15;

                }
                if (x < 0) {
                    x = 0;
                }
                if (y < 0) {
                    y = 0;
                }
                if (x > 450) {
                    x = 450;
                }
                if (y > 450) {
                    y = 450;
                }
                circle[0] = x;
                circle[1] = y;

                length += speed;

                context.beginPath();
                var img = new Image();
                img.src = "http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211766513.png";
                context.drawImage(img, circle[0], circle[1], circle[2], circle[3]);
                context.fill();
            }
        }
    }
}
}
setInterval(function () {
    track([setX, setY, 50, 50], [setX, setY, 500, 500], [setX, setY, 50, 50]);
}, 30);

根据您的评论，您希望蝴蝶也改变大小， 这是新代码：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var length = 0;
var x = 250;
var y = 250;
var z = 50;

var setX = 0;
var setY = 0;
var speed = 0.1;

function track(circle, horizontal, vertical) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(5, 5, 490, 490);
//movement
if (x >= 0) {
if (x <= 450) {
    if (y >= 0) {
        if (y <= 450) {
            if (Math.floor(Math.random() * 4) == 0) {
                x = x + Math.random() + 15;
                z = z-15;
            }
            if (Math.floor(Math.random() * 4) == 2) {
                y = y + Math.random() + 15;
                z = z-15;
            }
            if (Math.floor(Math.random() * 4) == 1) {
                x = x - Math.random() - 15;
                z = z+15;

            }
            if (Math.floor(Math.random() * 4) == 3) {
                y = y - Math.random() - 15;
                z = z+10;

            }
            if (x < 0) {
                x = 0;
            }
            if (y < 0) {
                y = 0;
            }
            if (x > 450) {
                x = 450;
            }
            if (y > 450) {
                y = 450;
            }
            if (z<20){
                z=20;
            }
            if (z>100){
                z=100;
            }

            circle[0] = x;
            circle[1] = y;
            circle[3] = z;
            circle[2] = z;

            length += speed;

            context.beginPath();
            var img = new Image();
            img.src = "http://es.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211766513.png";
            context.drawImage(img, circle[0], circle[1], circle[2], circle[3]);
            context.fill();
        }
    }
}
}
}
setInterval(function () {
    track([setX, setY, 50, 50], [setX, setY, 500, 500], [setX, setY, 50, 50]);
}, 60);

我刚刚将具有上限 (100) 和下限 (20) 的 math.random 添加到圆 [3] 和圆 [2]。

希望对你有帮助……