画布文本渲染

如何解决画布文本渲染

我真的可以使用一些帮助，我的目标是在画布的不同位置添加几行，这意味着使用 drawText 函数几次，如果我不使用 {{1 }} 在 drawText 的 onload 中，文本没有呈现我真的被卡住了，可以使用一些帮助，我的主要目标是制作可以编辑图片和制作模因的网站（例如：{{3 }}) 并且添加文本行是我遇到的问题，因为我不明白如何在保存旧文本行的同时渲染新文本行，每次我开始新行时，它就像重新渲染图像并从开始。

drawImage

解决方法

我在这里看到的问题是：

如何在保存旧文本行的同时呈现新文本行

看起来在你的代码中你是独立绘制的，下面是一种不同的方法，class Meme 有一些函数来添加文本和图像，但每次发生任何变化时，整个画布都会被清除（clearRect ) 并且每个元素都被重新绘制，魔法就在 this.draw() 中，即调用执行所有绘制的通用函数。

为了保持我的样本小，我硬编码了你作为参数的许多东西，如果你需要，你应该很容易重新引入它们

class Meme {
  constructor(ctx,width,height) {
    this.ctx = ctx;
    this.ctx.font = '80px Arial';
    this.ctx.fillStyle = "blue"
    this.ctx.textAlign = "center"
    this.width = width;
    this.height = height;
  }

  addHeadText(text) {
    this.htext = text;
    this.draw();
  }

  addFootText(text) {
    this.ftext = text;
    this.draw();
  }

  addImage(image_src) {
    this.image = new Image();
    this.image.src = image_src;
    this.image.onload = () => {
      this.draw()
    };
  }

  draw() {
    this.ctx.beginPath();
    this.ctx.clearRect(0,this.width,this.height)
    if (this.image) {
      this.ctx.drawImage(this.image,this.height);
    }
    if (this.htext) {
      this.ctx.textBaseline = "top";
      this.ctx.fillText(this.htext,this.width / 2,0);
    }
    if (this.ftext) {
      this.ctx.textBaseline = "bottom";
      this.ctx.fillText(this.ftext,this.height);
    }
    this.ctx.closePath();
  }
}

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

meme = new Meme(ctx,canvas.width,canvas.height)
meme.addHeadText("Hello");
meme.addFootText("World");
meme.addImage("http://i.stack.imgur.com/UFBxY.png");

document.getElementById('htext').onkeyup = (event) => {
  meme.addHeadText(event.srcElement.value);
};
document.getElementById('ftext').onkeyup = (event) => {
  meme.addFootText(event.srcElement.value);
};

Head Text:<input type="text" id="htext" name="ftext" style="width: 140px;" value="Hello"><br>
Foot Text:<input type="text" id="ftext" name="ftext" style="width: 140px;" value="World"><br>

<canvas id="c" width=280 height=380 style="border:2px solid red;"></canvas>