Question

我必须在HTML5 / CSS3中创建一个球类游戏。可以看到同样的JSFiddle。

现在我想要的是每次从墙上反弹时改变球的颜色。

var context;
var dx = 4;
var dy = 4;
var y = 150;
var x = 10;

function draw() {
  context = myCanvas.getContext('2d');
  context.clearRect(0, 0, 300, 300);
  context.beginPath();
  context.arc(x, y, 20, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  if (x < 0 || x > 300)
    dx = -dx;
  if (y < 0 || y > 300)
    dy = -dy;
  x += dx;
  y += dy;
}

setInterval(draw, 10);

#container {
  text-align: center;
}
#myCanvas {
  background: #fff;
  border: 1px solid #cbcbcb;
  text-align: center;
}

<div id="container">
  <div>
    <canvas id="myCanvas" width="300" height="300"></canvas>
  </div>
</div>

我不知道怎么做。 css3可以用来做这个吗？

Answer 1

随机颜色函数来自此处：https://stackoverflow.com/a/1484514/2042240

这将使其在每次反弹时都发生变化。

https://jsfiddle.net/e0b1gkc4/4/

{{1}}

CSS3：每次从画布墙反弹时改变球的颜色

1 个答案: