0

有人可以帮我一点画布吗，我正在学习它并且无法制作一个圆圈，当 r 达到 100 时，它会回到 0 动画。所以它是某种缩放图像。

我画了一个这样的圆圈：

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();
</script>

现在我如何用画布为它设置动画，当它的半径达到 100 时，它会立即回到 0，然后又回到 100。

谢谢

4

1 回答 1

2

看看数学窦函数http://www.digitalmedia.cz/shared/clanky/438/graf.gif

让我们利用它的值将变为1然后返回到和0之间的角度0PI

var period = 500; // [miliseconds]
var linearMod = Date.now() % period / period; // this goes from 0 to 1
var mod = Math.sin(linearMod * Math.PI); // and here with simple easing we create 
                                         // bouncing
var r = someRadius * mod;                // voila

通过这种方法，您还可以获得简单的正弦缓动，感觉更加动态。

这是给你的一个小小提琴http://jsfiddle.net/rezoner/6acF9/

您不必linearMod基于时间 - 您可以将其分配给滑块控件或任何您想要的。

于 2013-01-22T11:01:02.100 回答