0

我正在尝试使用 HTML5 和画布创建浮动圆圈效果。可以在https://layervault.com/上查看我的目标示例。您可以转到滑块中的第四张幻灯片（标题为“iOS 版 LayerVault 介绍”）来查看该示例。在那张幻灯片上，许多圆圈漂浮在物体之外。到目前为止，在我的代码中，我只能让 1 个圆圈浮起来。关于我应该采取的方法有什么想法吗？

到目前为止我的代码：

$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");

var circleColors = new Array();
circleColors[0]="#f0f";
circleColors[1]="#0f0";
circleColors[2]="#00f";
circleColors[3]="#f00";

function makeCircles() {
    var posX = Math.floor(Math.random()*500);
    var posY = 500;
    var theCircleColor = circleColors[Math.floor(Math.random()*circleColors.length)];

    function renderContent()
    {
        context.save();
        context.fillStyle=theCircleColor;
        context.beginPath();
        context.arc(posX,posY,40,0,2*Math.PI);
        context.fill();
        context.restore();
    }//end function renderContent

    function animationLoop()
    {
        canvas.width = canvas.width;
        renderContent();
        posY -= 5;
        if (posY < -40)
            posY = 500;
        setTimeout(animationLoop, 33);
    }//end function animationLoop


    animationLoop();
}//end function makeCircles

    makeCircles();

});//end document ready
4

1 回答 1

2

您需要制作一系列圆圈，每个圆圈都需要自己的 X/Y/Color 和潜在的速度，因此它们以不同的速率移动。

所以每个圆圈都是一个javascript对象

{
  posX: someValue,
  posY: someValue,
  color: someValue,
  speed: someValue
};

然后我们将其中的许多添加到一个数组中。这是使用您的代码的示例：

var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");

var circleColors = new Array();
circleColors[0] = "#f0f";
circleColors[1] = "#0f0";
circleColors[2] = "#00f";
circleColors[3] = "#f00";

var circles = [];

function makeCircles() {
    for (var i = 0; i < 20; i++) {
        var circle = {
            posX: Math.floor(Math.random() * 500),
            posY: 500,
            color: circleColors[Math.floor(Math.random() * circleColors.length)],
            speed: Math.floor(Math.random()*5)
        };
        circles.push(circle);
    }

    function renderContent() {
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            context.fillStyle = c.color;
            context.beginPath();
            context.arc(c.posX, c.posY, 40, 0, 2 * Math.PI);
            context.fill();
        }
    } //end function renderContent

    function animationLoop() {
        canvas.width = canvas.width;
        renderContent();
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            c.posY -= c.speed;
            if (c.posY < -40) c.posY = 500;
        }
        setTimeout(animationLoop, 33);
    } //end function animationLoop


    animationLoop();
} //end function makeCircles

makeCircles();

这里是现场直播：

http://jsfiddle.net/vTaLF/

于 2013-06-20T15:08:42.083 回答