Question

回答关于随机移动的最后一个主题。但我的一个问题仍未得到解答。关于如何创建这样的随机图像大小：http://ie.microsoft.com/testdrive/Performance/FishIETank/

那么我需要什么？ Math.random和for？请建议：）

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); //
}

帮助＆amp;请教我:)。

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);

我刚刚将math.random与上限（100）和下限（20）添加到圆圈[3]和圆圈[2]。

希望它有所帮助...

动画图像连续随机调整大小

1 个答案: