kineticjs - 画像kineticJSのテキスト

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]