- ベストアンサー
javascriptのcanvasについて
HTML5のcanvasを勉強しています。 下記リンクのようなボタンを押すたび画像が切り替わるようなものをcanvasを使って制作したいのですが、うまく出来ませんでした。 http://homepage2.nifty.com/toraneko/ugoku-gazoukiri2.html 下記のようなサイトを参考にcanvas内に画像を表示するだけなら出来ました。 http://honttoni.blog74.fc2.com/blog-entry-187.html 配列の設定の仕方などはどのようにすれば良いのでしょうか。
- shitsumon10
- お礼率100% (6/6)
- JavaScript
- 回答数2
- ありがとう数11
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
サンプルを作りました。 参考にどうぞ。 src配列に適当な画像パスを入れてください。 (jsfiddle : http://jsfiddle.net/3wnwztf1/ ) window.onload = function() { image1(); }; var src = [ 'test1.jpg', 'test2.jpg', 'test3.jpg' ]; var currentIndex = 0; var currentImage; function image1() { var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function() { currentIndex = (currentIndex - 1 + src.length) % src.length; image1(); } window.foward = function() { currentIndex = (currentIndex + 1) % src.length; image1(); }
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 ＞canvasを使って制作したいのですが、うまく出来ませんでした。 どのようにしてみたのか不明なので助言しにくいのですが、canvasへ画像を順に表示させればよいので、1枚表示できたのなら、その繰り返しだとも言えますが・・・？ 具体的には、drawImageメソッドで上書き（画像サイズが異なるなら、クリア後上書き）して行けばよさそうに思います。 画像の読み込みのタイミングで、表示できない場合があるようですが、もしかするとそれが原因でしょうか？ http://www.html5.jp/canvas/how6.html
お礼
fujillin様 ご回答有難うございます。 教えて頂いたページを参考にしてみます。
補足
fujillin様 ご回答有難うございます。 説明不足で申し訳ございません。 たとえば下記のようなソースで1枚は表示出来たのですが back()やfoward()のfunctionをどのようにすれば 複数の画像が順番に表示することが出来るのかわからない状態でした。 <script> onload = function() { image1(); }; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "test.jpg"; } </script> <body> <div> <canvas id="canvas1"></canvas> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> </body>
お礼
byDesign様 ご回答有難うございます。 サンプルまで作って頂き本当にありがとうございます。 教えて頂いたものを参考に勉強してみようと思います。