Question

我需要每10秒钟更改一个对象（用作桨的矩形）的颜色（例如，将白色矩形变成红色1秒钟）。

在我的代码中，对象的颜色在此处默认设置为白色：

 canvasContext.fillStyle = 'white';
  canvasContext.fillRect(paddleWidth,paddleOneY,paddleWidth,paddleHeight); // x, y, w, h

但是我不确定如何/在何处设置颜色以定期更改。我应该将fillStyle上的代码更新为更改颜色的函数，还是可以将其单独设置为更改并将默认fillStyle保留为白色？

Answer 1

您的问题尚不清楚，但也许是这样？

var colors = ['red', 'white', 'blue'];
var idx = 0;

setInterval(function(){ 
  canvasContext.fillStyle = colors[idx++ % 3];
  canvasContext.fillRect(paddleWidth,paddleOneY,paddleWidth,paddleHeight);
}, 1000);

该代码将每秒更改颜色。

Answer 2

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);

function changeColor()
{
    ctx = c.getContext("2d");
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(20, 20, 150, 100);
    setTimeout(revert,1000)
   
}

function revert()
{
    ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);
}

setInterval(changeColor,10000);
</script>

</body>
</html>

我不确定这不是您所需要的，但是您就在这里。老实说，我认为使用SVG更好，因为这样您就无需重新绘制形状。

根据变量值更改对象的颜色

2 个答案: