在画布中放置clearRect()（带有文本动画）

Question

我是 HTML5 canvas 的新手，制作了一个简单的文本动画。

但是，当动画正在进行时，我无法清除以前绘制的文本。文字看起来很拖沓。请找到下面的代码链接以获得清晰的图片。单击动画按钮即可观看动画。

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

}

这是小提琴

帮助我获得完美的动画。提前致谢！

Answer 1

我无法从你的代码中得到太多，最终重构了所有。希望这能让您走上正确的方向class Text {&nbsp; constructor(txt, font, backColor, textColor, x, y, speed) {&nbsp; &nbsp; this.txt = txt;&nbsp; &nbsp; this.font = font;&nbsp; &nbsp; this.backColor = backColor;&nbsp; &nbsp; this.textColor = textColor;&nbsp; &nbsp; this.initX = x;&nbsp; &nbsp; this.x = x;&nbsp; &nbsp; this.y = y;&nbsp; &nbsp; this.speed = speed;&nbsp; }&nbsp; draw(ctx) {&nbsp; &nbsp; ctx.beginPath()&nbsp; &nbsp; ctx.font = this.font;&nbsp; &nbsp; ctx.textBaseline = "top";&nbsp; &nbsp; ctx.fillStyle = this.backColor;&nbsp; &nbsp; var width = ctx.measureText(this.txt).width;&nbsp; &nbsp; ctx.fillRect(this.x, this.y, width, parseInt(this.font, 10));&nbsp; &nbsp; ctx.fillStyle = this.textColor;&nbsp; &nbsp; ctx.fillText(this.txt, this.x, this.y);&nbsp; &nbsp; this.x -= this.speed ;&nbsp; &nbsp; if (this.x < -width)&nbsp; &nbsp; &nbsp; this.x = this.initX&nbsp; }}var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");initX = canvas.widthdogs = 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() {&nbsp; ctx.clearRect(0, 0, canvas.width, canvas.height)&nbsp; dogs.draw(ctx)&nbsp; cats.draw(ctx)&nbsp; hello.draw(ctx)}<canvas id="canvas" width=220 height=100></canvas>应该都清楚了，如果有什么让你困惑的请告诉我