Javascript 重复时更改颜色和移动元素的Jquery坐标_Javascript_Jquery

Javascript 重复时更改颜色和移动元素的Jquery坐标

javascript jquery

Javascript 重复时更改颜色和移动元素的Jquery坐标,javascript,jquery,Javascript,Jquery,我试图重新创建一些我自己看过的JQuery教程，但我现在被卡住了我正在创建一个从一个位置开始到另一个位置结束的对象。图形会改变，但当它重复时，我希望该对象更改其颜色。我尝试过创建一个数组，并使用Math.floor（Math.random（）元素来实现它，但它不起作用此外，我还尝试使用jQuery执行以下操作，即，当我单击图形时，它会给出它在x和y上的位置我想做的事情如下例所示到目前为止我的代码 <!DOCTYPE html> <html> <head&g

我试图重新创建一些我自己看过的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>


例子
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-posicion=0；
var tamano=0；
setInterval（函数（）{
ctx.clearRect（0,040400）；
ctx.fillRect（Posicon，0，tamano，400 tamano）；
posicion++；
tamano++；
如果（位置>400）{
posicion=0；
tamano=0；
}
}, 30);    
var color=['红色'、'绿色'、'蓝色'、'橙色'、'黄色']；
ctx.fillStyle=color[Math.floor（Math.random（）*color.length）]；

有人能帮我或说我做错了什么吗？

试试这个：

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


var color=['红色'、'绿色'、'蓝色'、'橙色'、'黄色']；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var-posicion=0；
var tamano=0；
setInterval（函数（）{
ctx.clearRect（0,040400）；
ctx.fillRect（Posicon，0，tamano，400 tamano）；
posicion++；
tamano++；
如果（位置>400）{
posicion=0；
tamano=0；
ctx.fillStyle=color[Math.floor（Math.random（）*color.length）]；
}
}, 30);

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

我刚刚在if语句中添加了

ctx.fillStyle=color[Math.floor（Math.random（）*color.length）]；

。在该条件之后，对象将随着动画重新启动并更改颜色。我还将颜色数组向上移动

下面是一个例子，fiddle:

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

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

函数getRandomColor（）{ 变量字母='0123456789ABCDEF'。拆分（''）； var color='#'；对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）]； } 返回颜色； }

非常感谢！这真的很有效。我想问你，当我点击画布时，你是否知道一种改变颜色的方法。有可能做到吗？是的，但你不想在点击按钮时发生这种情况吗？这里是一个关于你同样问题的例子：但你应该在一个新问题中发布。如果改变的颜色帮助了你然后，请将问题标记为已解决。@incrativ这是带有开始和结束的最终版本：jsfiddle.net/eugensunic/ocohmgm6/2