Q&A
スクリプトが myCanvas より先に書いてある、ということはありませんか？
エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2
タイトルに示しましたように、canvasを使用した場合の画像表示
を試していたのですが、表示すらされることはありませんでした。
いかにすればよいかお教え願いませんでしょうか？
html5
1コード <body> 2<div class="main"> 3 <canvas id="myCanvas" width="493" height="215"></canvas> 4</div> 5 6 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 8 <script src="js/script.js"></script> 9</body>
javascript
1コード var canvas = document.querySelector("#myCanvas"); 2var context = canvas.getContext("2d"); 3var width = canvas.width; 4var height = canvas.height; 5var image = new Image(); 6image.src = "images/sweets.png";
javascriptコードは、それが全てでしょうか？
それであれば、画面には何も表示されないのは至極当たり前です。
（JS上でImageを使った変数を用意しただけの状態）
なるほど、確かにそうですね。
今回の場合は、window.onloadに続けるような書き方
になるのでしょうか？
> 今回の場合は、window.onloadに続けるような書き方
いえ、そうではなく、そもそも、canvas要素に画像を当て込むような処理が書かれていないからです。
その処理は別のところに書いているのでしょうか？
そうであれば、質問のコードに記載してください。
そして、その処理をそもそもしていないのであれば、
canvasで画像表示のことをもっとよく調べましょう。
回答1件
0
ベストアンサー
下記を追加すればいけます。
javascript
1// 下記を追加。画像のローデイングが完了した時点で処理を実行する、という構文 2// canvasに画像を入れ込む処理が必要 3image.onload = () => { 4 context.drawImage(image, 0, 0); 5};
投稿2020/06/17 05:58
総合スコア9555
ご指示通りに実行しましたら上手くいきました。
これからも一層励んでまいります。
ありがとうございました。
自身がどうしたいか、は整理されているようにお見受けしますので、
どれをどうすれば実現できるか、
ということと、
参考サイトなどの記述は何をどうしているのか、との処理の流れを意識して見て勉強されるといいかと。
どうか、頑張ってください。
あなたの回答
tips
プレビュー
