Question

我正在尝试重新创建一些我自己看过的JQuery教程，但我现在卡住了。

我正在创建一个从一个位置开始并在另一个位置结束的对象。这个数字会改变，但是当它重复时，我希望该对象改变它的颜色。我已经尝试创建一个数组并使用Math.floor(Math.random()元素来执行它但它不起作用。

此外，我尝试使用jQuery执行以下操作，即，当我单击该图时，它给出了它在x和y上的位置。

我想要做的是在下面的例子中。

到目前为止我的代码

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <meta charset="utf-8">
</head>

<body>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

    <script>

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

    var posicion = 0;    
    var tamano = 0;

    setInterval(function () {

    ctx.clearRect(0, 0, 400, 400);
    ctx.fillRect(posicion, 0, tamano, 400-tamano);

    posicion++;
    tamano++;

    if (posicion > 400){
    posicion = 0;
    tamano = 0;
    }
    }, 30);    

    var color = ['red', 'green', 'blue', 'orange', 'yellow'];     
    ctx.fillStyle = color[Math.floor(Math.random() * color.length)];

</script>

</body>
</html>

任何人都可以帮助我或说出我做错了吗？

Answer 1

请改为尝试：

 <script>

    var color = ['red', 'green', 'blue', 'orange', 'yellow'];     
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var posicion = 0;    
    var tamano = 0;

    setInterval(function () {

    ctx.clearRect(0, 0, 400, 400);
    ctx.fillRect(posicion, 0, tamano, 400-tamano);

    posicion++;
    tamano++;

    if (posicion > 400){
    posicion = 0;
    tamano = 0;
          ctx.fillStyle = color[Math.floor(Math.random() * color.length)];
    }
    }, 30);    

</script>

您必须更改if语句中的颜色。

我刚刚在if语句中添加了ctx.fillStyle = color[Math.floor(Math.random() * color.length)];。在条件之后，对象随动画重新启动并更改颜色。我也把你的颜色阵列移动了。

这是一个例子，小提琴：https://jsfiddle.net/eugensunic/ocohmgm6/

Answer 2

您可以使用返回随机颜色的函数，如下所示：

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

重复时更改颜色和移动元素

2 个答案: