Question

我有问题，如果可以在图像上放置文字。

这是一个简单的例子，但文字不会出现。

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x =  0;
  var y = 0;
  var width = 500;
  var height = 500;
  var imageObj = new Image();

  imageObj.onload = function() {
    context.drawImage(imageObj, x, y, width, height);
  };
  imageObj.src = 'http://blaaah';

  context.fillStyle = 'white';

  context.fillText('Hello World!', 150, 100);

Answer 1

请参阅上面的评论，将您的代码更改为：

与bighostkim相同，它只是需要改变的顺序。

 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x =  0;
 var y = 0;
 var width = 500;
 var height = 500;
 var imageObj = new Image();

 imageObj.onload = function() {
      context.drawImage(imageObj, x, y, width, height);

      context.fillStyle = 'white';

        context.fillText('Hello World!', 150, 100);
 };
 imageObj.src = 'http://blaaah';

Answer 2

这是因为在将文本写入画布后绘制图像。这是序列。

使用callback onload定义图像
你写'Hello World'
加载图片并在画布上绘制图像

如您所见，您的图片会覆盖文字，这就是您没有看到它的原因。

以下是工作示例[http://jsfiddle.net/7DU4e/] [1]

图像kineticJS上的文字

2 个答案: