图像动力学JS上的文本答案

【问题标题】：text on image kineticJS图像动力学JS上的文本
【发布时间】：2013-02-04 09:32:12
【问题描述】：

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

这是一个简单的例子，但没有出现文本。

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

【问题讨论】：

这很容易做到，只是你的图像是在文本写入后加载的。您有 image.onload 并等待图像加载，同时您正在绘制文本

标签： kineticjs

【解决方案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';

【讨论】：

另外，您将其标记为 kineticJS，但您的代码只是普通的 javascript，也许您应该为您的文本和图像使用 kineticJS 构造函数，然后您可以更改它们的 z-index 并重绘跨度>
感谢您的建议，他们对我很有帮助。我有一个问题。是否可以通过输入更改文本？正如你输入的那样，我想使用建设者和舞台......所以我将此代码重写为stackoverflow.com/questions/14696875/…我是动力学的初学者，你的建议很棒，谢谢。）
这个链接是用来改变宽度的，但是同样的问题。）
是的，可以通过输入更改文本。如果您使用 kineticjs 中的构造函数，您可以执行 mytext.setText('My Text Here');假设 mytext = new Kinetic.Text();
所以我不知道我做错了什么。我按照你的输入做了，但它什么也没做。

【解决方案2】：

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

您使用回调 onload 定义图像
你写的是“Hello World”
图像已加载，您在画布上绘制图像

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

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

【讨论】：