Question

在我的代码中，即使我没有调用lineTo()方法，moveTo()方法的工作方式也是如此。我也试图使用画布线条创建动画，但是我不能正确地制作它。这是正在进行的工作

css-> body {margin: 0; overflow: hidden;}

html->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <canvas></canvas>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

jquery->

$(document).ready(function () {

    // make canvas fullpage
    var canvas = $('canvas');
    var ctx = canvas[0].getContext('2d');

    var innerWidth  = $(window).width();
    var innerHeight = $(window).height();

    canvas.attr('width', innerWidth);
    canvas.attr('height', innerHeight);

    var x  = 0;
    var y  = 0;
    var dx = 10;
    var dy = 10;

    // animate function
    $.fn.animate = function () {

        requestAnimationFrame($.fn.animate);

        ctx.clearRect(0, 0, innerWidth, innerHeight);

        // for diagonal motion
        ctx.lineTo((innerWidth / 1000) * x, (innerHeight / 1000) * y);
        ctx.stroke();

        // for horizontal motion
        // ctx.lineTo((innerWidth / 1000) * x, innerHeight / 2);
        // ctx.stroke();

        // for vartical motion
        // ctx.lineTo(innerWidth / 2, (innerHeight / 1000) * y);
        // ctx.stroke();

        if (x > innerWidth || x < 0) {
            dx = -dx;
        }

        if (y > innerHeight || y < 0) {
            dy = -dy;
        }

        x += dx;
        y += dy;

    }

    $.fn.animate();

});

如何以正确的形式制作此动画以及如何停止动画功能？

Answer 1

要停止动画，您需要使用cancelAnimationFrame。此方法将动画ID作为参数。现在，如果您单击画布，则可以停止动画或在动画停止的情况下开始动画。

$(document).ready(function() {
  var rid = null;
  // make canvas fullpage
  var canvas = $("canvas");
  var ctx = canvas[0].getContext("2d");

  var innerWidth = $(window).width();
  var innerHeight = $(window).height();

  canvas.attr("width", innerWidth);
  canvas.attr("height", innerHeight);

  var x = 0;
  var y = 0;
  var dx = 10;
  var dy = 10;

  // animate function
  $.fn.animate = function() {
    rid = requestAnimationFrame($.fn.animate);
    ctx.clearRect(0, 0, innerWidth, innerHeight);

    // for diagonal motion
    ctx.lineTo(innerWidth / 1000 * x, innerHeight / 1000 * y);
    ctx.stroke();

    if (x > innerWidth || x < 0) {
      dx = -dx;
    }

    if (y > innerHeight || y < 0) {
      dy = -dy;
    }

    x += dx;
    y += dy;
  };

  $.fn.animate();

  canvas.click(function() {

    if (rid) {
      cancelAnimationFrame(rid);
      rid = null;
    } else {
      rid = requestAnimationFrame($.fn.animate);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas></canvas>

html画布行动画修复

1 个答案: