Q&A
> app.jsファイルにscriptを書くとエラーになります。
app.jsは、どのようにHTMLから読み込んでいますか？
添付画像のように、「文字を描く」ボタンを押すと、画像に文字が表示されるscriptを実装したいです。
「文字を描く」ボタンを押すと、
「Uncaught ReferenceError: drawText is not defined at HTMLButtonElement.onclick」
というエラーが解決できません。。。
また、function loadImage(id)で読み込んでいる画像も出力されません。
HTML
1<div onload="loadImage('preview');"> 2 <p><canvas id="preview"></canvas></p> 3 <p> 4 <input type="text" id="canvas_text" value="我輩は犬である"> 5 <button onclick="drawText('preview', 'canvas_text');">文字を描く</button> 6 </p> 7</div>
javascript
1//キャンバスに画像を描画する 2function loadImage(id) 3{ 4 //画像を読み込んでImageオブジェクトを作成する 5 var image = new Image(); 6 image.src = '/images/canvas.png'; 7 image.onload = (function () { 8 //画像ロードが完了してからキャンバスの準備をする 9 var canvas = document.getElementById(id); 10 var ctx = canvas.getContext('2d'); 11 //キャンバスのサイズを画像サイズに合わせる 12 canvas.width = image.width; 13 canvas.height = image.height; 14 //キャンバスに画像を描画（開始位置0,0） 15 ctx.drawImage(image, 0, 0); 16 }); 17} 18//キャンバスに文字を描く 19function drawText(canvas_id, text_id) 20{ 21 var canvas = document.getElementById(canvas_id); 22 var ctx = canvas.getContext('2d'); 23 var text = document.getElementById(text_id); 24 //文字のスタイルを指定 25 ctx.font = '32px serif'; 26 ctx.fillStyle = '#404040'; 27 //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter 28 ctx.textBaseline = 'center'; 29 ctx.textAlign = 'center'; 30 //座標を指定して文字を描く（座標は画像の中心に） 31 var x = (canvas.width / 2); 32 var y = (canvas.height / 2); 33 ctx.fillText(text.value, x, y); 34}
HTML内に<script></script>で囲って上記scriptを書くと正常に動作しましたが、app.jsファイルにscriptを書くとエラーになります。
どこが間違えているのでしょうか？
よろしくお願いします。
回答2件
0
ベストアンサー
また、function loadImage(id)で読み込んでいる画像も出力されません。
そもそも、<div>ではonloadイベントは発生しないのではないでしょうか。
ページ全体のDOMContentLoadedで動かすのが妥当ではないかと考えます。
投稿2021/11/16 08:58
総合スコア145183
<div>ではonloadイベントは発生しないんですね。勉強になりました。
<body> タグにonload="loadImage('preview');" で画像表示されました。
0
<div onload="loadImage('preview');">
divにloadイベントは無理でしょう
javascript
1window.addEventListener('DOMContentLoaded', ()=>{ 2 loadImage('preview'); 3});
のような処理にすればいいのでは？
投稿2021/11/16 08:57
総合スコア114814
あなたの回答
tips
プレビュー
