Q&A
ありがとうございます！効率が悪いので不思議に思ったのですが、仕様なのでしょうがないということが理解できました。
CANVAS初心者です。CANVASで画像を表示するときに、静止画なのにsetIntervalを使う意味が分からず、普通のimage要素のようにただ置くことはできないのでしょうか、少し調べたところ、大きさの調整やマスキング、背景として使うとき、とあったのですが、それだけのためにsetIntervalを使うのでしょうか？アドバイス頂けたら幸いです。
JavaScript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"/> 5 6<style> 7body{ 8background-color:white; 9} 10</style> 11<script type="text/javascript"> 12var image1 = new Image(); 13image1.src="img/ukiwa.jpg"; 14</script> 15<title>img</title> 16</head> 17<body> 18 19<canvas id="canvas1" width="200" height="200" style="border:1px solid black;"></canvas> 20<br> 21<script type="text/javascript"> 22var canvas1 = document.getElementById("canvas1"); 23var ctx1 = canvas1.getContext("2d"); 24 25setInterval(function(){ 26ctx1.drawImage(image1,0,0,200,200); 27},100) 28 29</script> 30</body> 31</html>
回答2件
0
ベストアンサー
ふつうのimg要素であれば、「とりあえず枠だけ取っておいて、ロードされたら描画する」と言うかたちで処理をすすめることができるのですが、<canvas>に書き出す場合は、「イメージを描画する」という命令を実行する時点で、画像データが揃っている必要があります（どんどん描画できることもあって、「ロードされてから描画する」という処理が煩雑となるため採用されていません）。
そのため、new Image()でロードされるのを待つ必要が出てきます。100ミリ秒で間に合えばいいですが、間に合わないとうまく出ません。「ロードが終わるまで描き続ける」という意味のsetIntervalかもしれませんが、止まらないので無駄です。Imageのonloadにセットするのも一案かもしれません。
投稿2017/04/13 14:19
編集2017/04/13 14:21
総合スコア145183
0
結論から述べるとcanvasに静止画を描画するためにsetIntervalを使用する必要はありません。
HTML上にimgタグを記述した場合、ブラウザがimgタグを解釈した時点でサーバに対して画像情報のリクエストを出し、レスポンスが返ってきてからその情報を表示します。レスポンスが返ってくるまでの間は、その画像は表示されていない状態になっていますが、大抵の場合、それが問題になることはありません。
それに対してcanvasに画像を表示する場合、画像情報をImageオブジェクトに読み込ませ、その処理が完了したタイミングでcanvasにその内容を書き出すことが多いと思います。この場合はImageオブジェクトに画像が完全に読み込まれるのを待ってから書き出す必要があります。
最も良いのは、次のように画像の読み込みが完了した時に発生するloadイベントを待ってからcanvasに書き出すことです。
var image = new Image();
image.onload = function(){
//Imageオブジェクトの中身をcanvasに書き出す処理
};
image.src = '画像のURL';
setIntervalを使用しているのは、Imageオブジェクトの中身を何度も書き出していれば、いつかは読み込みが完了して正しく画像が表示できることを期待しているのでしょう。
それでも正しく表示されますが、何度も繰り返し描画するので、非常に効率の悪い書き方になってしまっています。
、
投稿2017/04/14 03:06
総合スコア93
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/13 16:50
2017/04/13 22:02
2017/04/14 11:36