html исправление анимации линии холста - PullRequest
Новая
       0

html исправление анимации линии холста

0 голосов
/ 06 февраля 2019

в моем коде, как работает метод 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();

});

как сделать эту анимацию в правильном виде и как остановить функцию анимации?

1 Ответ

0 голосов
/ 06 февраля 2019

Для остановки анимации необходимо использовать cancelAnimationFrame.Этот метод принимает в качестве аргумента идентификатор анимации.Теперь, если вы нажмете на холст, вы можете остановить анимацию или запустить анимацию, если она остановлена. 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...