kineticjs - 图像动力学JS上的文本

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

发生这种情况是因为您的图像是在您的文本写在画布上之后绘制的。这是顺序。

1. 你用回调 onload 定义图像
2. 你写“Hello World”
3. 图像已加载，您在画布上绘制图像

如您所见，您的图像覆盖了文本，这就是您看不到它的原因。

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