javascript - Canvas 。 AngularJS。添加文本和图像

Question

我正在将图像添加到 Canvas ，然后尝试在图像顶部添加文本。文本绑定(bind)到文本输入。问题是，当我在字段中输入文本时，它不是重新绘制，而是重复本身。

我的指令:

.directive('memeimage', function () {
      return {
        restrict: 'A',
        link: function (scope, el, attrs) {

          scope.upperText = "";
          scope.fontsize = 50;

          scope.drawCanvas = function () {

            var canvas = el[0];
            var context = canvas.getContext("2d");

            context.font = scope.fontsize + "px  Impact";
            context.fillStyle = 'white';
            context.strokeStyle = 'black';
            var x = canvas.width / 2;
            var y = canvas.height / 6;
            context.textAlign = 'center';
            context.fillText(scope.upperText.toUpperCase(), x, y);
            context.lineWidth = 2;
            context.strokeText(scope.upperText.toUpperCase(), x, y);


          };
        }
      }
    });

这是 fiddle : http://jsfiddle.net/HB7LU/5085/

如何避免这种情况并且不重复文本？清除 Canvas 不是可行的方法，因为我还在同一 Canvas 上使用了图像。

谢谢

Answer 1

简单的答案是您使用多个重叠的 Canvas 元素。这将使您可以自由地清除文本并仍然保留下面的图像。

当您准备导出到图像时，可以使用下面找到的解决方案将多个 Canvas 绘制到单个图像:

Save many canvas element as image