Размещение clearRect () на холсте (с текстовой анимацией)

Question

Я новичок ie на HTML5 холсте и сделал простую текстовую анимацию.

Однако я не могу удалить ранее нарисованный текст во время анимации. Текст выглядит растянутым. Пожалуйста, найдите код ссылки ниже для ясного изображения. Нажмите на кнопку анимации, чтобы увидеть анимацию.

function drawTextOnCanvas(
can,
  ctx,
  text,
  font,
  backColor,
  textColor,
  maxWidth,
  startingx,
  startingy,
  spacing
) {
  var linesArray = getLines(ctx, text, maxWidth);
  ctx.save();

  for (var i = 0; i < linesArray.length; i++) {

    drawTextBG(
    can,
      ctx,
      linesArray[i],
      font,
      backColor,
      textColor,
      startingx,
      startingy
    );

    // ctx.fillText(linesArray[i], startingx, startingy);
    /* startingx += spacing; */
    startingy += spacing; // Remove this if you want everthing in line
  }
  ctx.restore();
}

function getLines(ctx, text, maxWidth) {
  // Enter maxWidth depending on the resolution and canvas dimensions
  var words = text.split(" ");
  var lines = [];
  var currentLine = words[0];
    ctx.font = "54px bolder Arial"
  for (var i = 1; i < words.length; i++) {
    var word = words[i];
    var width = ctx.measureText(currentLine + " " + word).width;
    if (width < maxWidth) {
      currentLine += " " + word;
    } else {
      lines.push(currentLine);
      currentLine = word;
    }
  }
  lines.push(currentLine);
  return lines;
}

function drawTextBG(can,ctx, txt, font, backColor, textColor, x, y) {
  /// set font
  console.log(txt)
  x= -300;
  let speed = 15;
  let distance = 0;
   var startTime = new Date().getTime();
var interval = setInterval(function() {

    if (new Date().getTime() - startTime > 1000) {
      clearInterval(interval);
    }

  if (distance >= 600) {
    distance = 0;
    // clearInterval(interval);
    x = canv.width / 2;
  }

    distance += speed;

    animateText(can,ctx, txt, font, backColor, textColor, x + distance, y);

  }, 33);


}



function animateText(can,ctx, txt, font, backColor, textColor, x, y) {

  ctx.font = font;
  /// draw text from top - makes life easier at the moment
  ctx.textBaseline = "top";
  /// color for background
  ctx.fillStyle = backColor;
  /// get width of text

  var width = ctx.measureText(txt).width;
  /// draw background rect assuming height of font
  ctx.fillRect(x, y, width, parseInt(font, 10));
  /// text color
  ctx.fillStyle = textColor;
  /// draw text on top
  ctx.fillText(txt, x, y);

}

Это Скрипка

Помогите мне в получении идеальная анимация. Заранее спасибо!

Answer 1

Я не мог многое сделать из вашего кода, в конечном итоге рефакторинг всего.

Надеюсь, это отправит вас в правильном направлении

class Text {
  constructor(txt, font, backColor, textColor, x, y, speed) {
    this.txt = txt;
    this.font = font;
    this.backColor = backColor;
    this.textColor = textColor;
    this.initX = x;
    this.x = x;
    this.y = y;
    this.speed = speed;
  }
  draw(ctx) {
    ctx.beginPath()
    ctx.font = this.font;
    ctx.textBaseline = "top";
    ctx.fillStyle = this.backColor;

    var width = ctx.measureText(this.txt).width;
    ctx.fillRect(this.x, this.y, width, parseInt(this.font, 10));
    ctx.fillStyle = this.textColor;
    ctx.fillText(this.txt, this.x, this.y);
    this.x -= this.speed ;
    if (this.x < -width)
      this.x = this.initX
  }
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

initX = canvas.width
dogs = new Text("Dogs are cute animals", "20px Arial", "#f50", "#000", initX, 20, 1)
cats = new Text("Cats say Miauu", "22px Arial", "#000", "#0F0", initX, 50, 0.5)
hello = new Text("HELLO", "12px Arial", "#F00", "#FF0", initX, 80, 3)

setInterval(draw, 20)

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  dogs.draw(ctx)
  cats.draw(ctx)
  hello.draw(ctx)
}

<canvas id="canvas" width=220 height=100></canvas>

Должно быть все ясно, дайте мне знать, если вас что-то смущает