Question

我将图片添加到画布，然后尝试在图片顶部添加文字。文本绑定到文本输入。问题是当我在字段中键入文本而不是重绘时，它本身就会重复。

我的指示：

.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);


          };
        }
      }
    });

这里的小提琴： http://jsfiddle.net/HB7LU/5085/

如何避免这种情况并且不重复文字？清除画布是不可取的，因为我也在同一画布上使用了图像。

由于

Answer 1

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

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

Save many canvas element as image

Answer 2

为什么不使用SVG而不是Canvas？您可以更好地控制单个元素，尤其是在您尝试绑定到输入控件时。

Answer 3

您必须使用clearRect重绘画布或更改画布宽度或高度。

Fiddle

c.width = c.width

帆布。 AngularJS。添加文字和图片

3 个答案: