2

キャンバスに画像を配置しようとしています。次のチュートリアル https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_imagesを読み、 キャンバスに似たようなことをしようとし<canvas id="canvas" width="400" height="400"></canvas> ましたが、関数を作成しました

  function putImage(){
         var img = new Image();
         img.src = "./path.png"; 
         var ctx = document.getElementById('canvas').getContext('2d');
         ctx.drawImage(img,8,8);            
  }

しかし、画像はキャンバスに表示されていません。画像パスを印刷しましたが、正しいので、この問題を解消できました。助言がありますか？

ありがとう

4

3 に答える 3

8

チュートリアルによると、あなたはそのようにあなたのctx.drawImage()内側を包むことになっていますimg.onload

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = '/files/4531/backdrop.png';
}

これがお役に立てば幸いです。

于 2013-03-11T07:51:27.133 に答える