Javascript-форум - Вопрос по анимации canvas

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Вопрос по анимации canvas (https://javascript.ru/forum/dom-window/74313-vopros-po-animacii-canvas.html)

Вопрос по анимации canvas

Должно получиться что-то типа шкалы с делениями.
Деления двигаются справа налево, как только крайнее деление доходит до края холста, то оно должно исчезнуть и появиться справа. Но исчезают все деления, и появляются справа. Подскажите что можно сделать.[JS][JS]

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>...</title>

</head>
<body>
 
 <script type="text/javascript">
 
   var canvas = document.createElement('canvas');
   canvas.id = 'canvas';
   canvas.style.border = 'double black 4px';
   document.body.appendChild(canvas)
	 
   var cnvWidth = canvas.width = window.innerWidth-30;
   var cnvHeight = canvas.height = window.innerHeight-30;
	 
   var ctx = canvas.getContext('2d');
   
   function Shkale(c, x) {
     
	 var self = this;
	 this.x = x;
	 
	 Shkale.prototype.gorLine = function() {
	   
	   c.beginPath();
	   c.strokeStyle = '#396';
	   c.moveTo(0, cnvHeight/2);
	   c.lineTo(cnvWidth, cnvHeight/2);
	   c.stroke();
	   
	 };
	 
	 Shkale.prototype.verLine = function() {
	   for (var i = 0; i < cnvWidth; i += 45) {
	     c.beginPath();
	     c.strokeStyle = '#00f';
	     c.moveTo(this.x + i, cnvHeight/2 - 50);
	     c.lineTo(this.x + i, cnvHeight/2 + 50);
	     c.stroke();
	   }
	 };
	 
   };

   var shkale = new Shkale(ctx, 50);
   
   function move() {
     ctx.clearRect(0, 0, cnvWidth, cnvHeight);
     shkale.gorLine();
     shkale.verLine();
	 shkale.x -= 2
	 if (shkale.x < 0) {
	   shkale.x = cnvWidth
	 };
	 requestAnimationFrame(move);
	 console.log(shkale.x);
   };
   
   move();
   
 </script>
</body>
</html>

Sevic,
строки 38 и 58

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>...</title>

</head>
<body>

 <script type="text/javascript">

   var canvas = document.createElement('canvas');
   canvas.id = 'canvas';
   canvas.style.border = 'double black 4px';
   document.body.appendChild(canvas)

   var cnvWidth = canvas.width = window.innerWidth-30;
   var cnvHeight = canvas.height = window.innerHeight-30;

   var ctx = canvas.getContext('2d');

   function Shkale(c, x) {

     var self = this;
     this.x = x;

     Shkale.prototype.gorLine = function() {

       c.beginPath();
       c.strokeStyle = '#396';
       c.moveTo(0, cnvHeight/2);
       c.lineTo(cnvWidth, cnvHeight/2);
       c.stroke();

     };

     Shkale.prototype.verLine = function() {
       for (var i = 0; i < cnvWidth +45; i += 45) {
         c.beginPath();
         c.strokeStyle = '#00f';
         c.moveTo(this.x + i, cnvHeight/2 - 50);
         c.lineTo(this.x + i, cnvHeight/2 + 50);
         c.stroke();
       }
     };

   };

   var shkale = new Shkale(ctx, 50);

   function move() {
     ctx.clearRect(0, 0, cnvWidth, cnvHeight);
     shkale.gorLine();
     shkale.verLine();
     shkale.x -= 2;

   if (shkale.x < 0) {
      shkale.x = 45
    };

     requestAnimationFrame(move);
     console.log(shkale.x);
   };

   move();

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

canvas шкала анимация requestAnimationFrame

Sevic,
Вариант анимации ...

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>...</title>

</head>
<body>

 <script type="text/javascript">
var canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.style.border = "double black 4px";
document.body.appendChild(canvas);
var cnvWidth = canvas.width = window.innerWidth - 30;
var cnvHeight = canvas.height = window.innerHeight - 30;
var ctx = canvas.getContext("2d");

function Shkale(c, x) {
    var self = this;
    this.x = x;
    Shkale.prototype.gorLine = function() {
        c.beginPath();
        c.strokeStyle = "#396";
        c.moveTo(0, cnvHeight / 2);
        c.lineTo(cnvWidth, cnvHeight / 2);
        c.stroke()
    };
    Shkale.prototype.verLine = function() {
        for (var i = 0; i < cnvWidth + 45; i += 45) {
            c.beginPath();
            c.strokeStyle = "#00f";
            c.moveTo(this.x + i, cnvHeight / 2 - 50);
            c.lineTo(this.x + i, cnvHeight / 2 + 50);
            c.stroke()
        }
    }
}
var shkale = new Shkale(ctx, 50);
var time = performance.now(),
    duration = 1700;//скорость одного деления в ms

function move(b) {
    b = (b - time) / duration;
    1 <= b && (b = 1);
    shkale.x = 45 - 45 * b;
    ctx.clearRect(0, 0, cnvWidth, cnvHeight);
    shkale.gorLine();
    shkale.verLine();
    if (b == 1) time = performance.now();
    requestAnimationFrame(move);
    console.log(shkale.x)
}
requestAnimationFrame(move);


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

ваш вариант имеет более фиксированый интервал, независит от FPS дисплея и все такое?

Цитата:

Сообщение от Sevic

ваш вариант имеет более фиксированый интервал

да

Цитата:

Сообщение от Sevic

независит от FPS дисплея и все такое?

:-?

https://learn.javascript.ru/js-animation

Sevic,
ок, используйте что вам удобнее, shkale.x -= 2; зависит от числа запусков move и интервал сумма запусков, duration = 1700;//скорость одного деления в ms -- не зависит от числа запусков и интервал более стабилен, придерживается заданной величины.

теперь разобрался, спасибо!