我正在尝试重新创建一些我自己看过的 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>
任何人都可以帮助我或说出我做错了什么吗？
最佳答案
试试这个:
<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)]; 。条件满足后，对象将重新启动动画并更改颜色。我还将你的颜色数组上移了。
这是一个例子， fiddle :https://jsfiddle.net/eugensunic/ocohmgm6/
关于javascript - 重复时更改颜色和移动元素的 Jquery 坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32424196/