Q&A
image.pngをcanvas内に表示させたいのですが、うまくいきません。
エラーメッセージは出てないので初歩的なミスだと思うのですが…
html
1<!DOCTYPE html> 2<html> 3 <head> 4<link rel="stylesheet" href="style.css"> 5<meta charset="utf-8"> 6 </head> 7 <body> 8 <canvas style="background-color: aqua;" id="canvas"></canvas> 9 <script src="man.js"></script> 10 11 </body> 12</html>
javascript
1{ 2let canvas = document.getElementById('canvas'); 3let ctx = canvas.getContext('2d'); 4canvas.width = 1000; 5canvas.height = 1000; 6 7let img = new Image(); //画像オブジェクト作成 8img.src = "image.png"; //写真のパスを指定する 9let w = 200; 10let h = 200; 11ctx.drawImage(img,w,h); 12}
回答1件
0
ベストアンサー
drawImageの時点でimage.pngがダウンロード完了できていないためだと思います
img.onload = () => { let w = 200; let h = 200; ctx.drawImage(img,w,h); };
上記のようにonloadイベントでロード完了イベントで描画する必要があります
投稿2021/11/08 08:04
総合スコア136
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/08 08:38