在画布中放置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 {

  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>

应该都清楚了，如果有什么让你困惑的请告诉我