1. ホーム
  2. html

[解決済み] キャンバスに画像を描く

2022-02-18 18:30:31

質問

キャンバスに画像を貼り付けようとしています。次のチュートリアルを読みました。 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);            
  }

が、画像がキャンバスに表示されない。 画像パスを印刷したところ、正しく表示されたので、この問題は解消できました。 何かいい方法はないでしょうか?

感謝

解決方法は?

チュートリアルによれば、あなたは 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';
}

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