解决方案：

Question

每当有人点击我网站的某些部分时，我都想展示一个随着时间的推移变大的圈子。我想通过画布做到这一点。到目前为止，我设法将圈添加到访问者点击的位置：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #cccccc;">

    </canvas>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script>

        /* Canvas test. */
        $(function() {
            var c = $("#myCanvas");
            // add element that changes over time,
            $(c).click(function(e) {
                var ctx = this.getContext("2d");
                ctx.beginPath();
                ctx.arc(e.pageX,e.pageY,40,0,2*Math.PI);
                ctx.stroke();
            });
        });

    </script>
</body>
</html>

是否也可以让这些圆圈每100毫秒改变半径1px，当它们的半径大于画布时，它们会消失？

没有画布也可以这样做吗？

Answer 1

Imgur

解决方案：

您必须使用 requestAnimationFrame ，添加元素并随时间更改，将数据推入数组，然后绘制圆圈。

/* Canvas test. */
var circles = [];
var canvas = null;
var ctx = null;

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  circles.forEach(function(arg) {
    var size = 100 - (new Date() - arg.time) / 10;
    if (size <= 0)
      return;
    ctx.beginPath();
    ctx.arc(arg.x, arg.y, size, 0, 2 * Math.PI);
    ctx.stroke();
  });

  requestAnimFrame(loop);
}

$(function() {
  canvas = $("#myCanvas")[0];
  ctx = canvas.getContext("2d");

  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
  })();

  requestAnimFrame(loop);
});


$(function() {
  var c = $("#myCanvas");
  // add element that changes over time,
  $(c).click(function(e) {
    circles.push({
      time: +new Date(),
      x: e.pageX,
      y: e.pageY
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #cccccc;"></canvas>

Answer 2

是否也可以让这些圆圈每100毫秒改变半径1px，当它们的半径大于画布时，它们会消失？是

您可以开始动画循环（使用raF）并更改/停止增长

没有画布也可以这样做吗？是

Javasccript + SVG或javascript + css3但这些可能不如画布那么容易

编辑：找到了其他一些有用的问题：Expanding circles with CSS3 animations

如何向随时间变化的画布添加元素？

2 个答案:

解决方案：