- ベストアンサー
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>
関連するQ&A
- javascriptでURLを取得するには？
pcafeさん（http://pcafe.blog3.fc2.com/blog-entry-372.html）にあるようなことを、ブログ上でなくてホームページ上で実現したいと思っています。 上記のサイト様を踏まえた上で、どのようなことがしたいかと言いますと、下記のようなことをしたいと思っています。 サンプル図：http://lancerevolution.tuzikaze.com/sampletest.html (1)http://×××.blog×.fc2.com/blog-entry-1.htmlのリンクをクリックし、新規ウィンドウでmenu.htmlを開く (2)http://×××.blog×.fc2.com/blog-entry-1.htmlの「1」をインラインフレームの「src」に代入して、1.htmlのファイルを(3)に表示させる ＊子のウィンドウのURLではなくて、親のウィンドウのURLを対象にして、その数字に応じたhtmlファイルを(3)に表示させます つまり、 ◆http://×××.blog×.fc2.com/blog-entry-1.htmlと言うページがあった時に、子ウィンドウのインラインフレームに <iframe src="="./file/1.html"></iframe> ◆http://×××.blog×.fc2.com/blog-entry-2.htmlと言うページがあった時に、子ウィンドウのインラインフレームに <iframe src="="./file/2.html"></iframe> ・ ・ ◆http://×××.blog×.fc2.com/blog-entry-300.htmlと言うページがあった時に、子ウィンドウのインラインフレームに <iframe src="./file/300.html"></iframe> にしたいということです。 ＊インラインフレームがある部分は、menu.htmlと言うページしか使わないので、ページ１つ１つにsrcは設定できません。設定できるのは、menu.htmlのみです。そのため、pcafeさんのやり方がどうしてもしたいのです。 長くなりましたが、どうぞよろしくお願いします。
- 締切済み
- JavaScript
- 秀丸の正規表現置換でこの文字列にしたい
タイトルの通りですが、秀丸エディタで下記の文字列に置換しようとしています。 目的はFC2ブログでの全記事タイトルリストの作成です。 ↓最終的にこのような形にリスト化したいと思っています。 http://●●.blog21.fc2.com/blog-entry-〇〇.html,<a href="http://●●.blog21.fc2.com/blog-entry-〇〇.html" target="_blank">ブログタイトル１</a> http://●●.blog21.fc2.com/blog-entry-△△.html,<a href="http://●●.blog21.fc2.com/blog-entry-△△.html" target="_blank">ブログタイトル２</a> http://●●.blog21.fc2.com/blog-entry-□□.html,<a href="http://●●.blog21.fc2.com/blog-entry-□□.html" target="_blank">ブログタイトル３</a> ： ： ※ ●●はブログID，〇〇や□□は記事のナンバーです（順不同） 現時点で、 : <a id="link__inpage_21" href="http://●●.blog21.fc2.com/blog-entry-〇〇.html" title="このリンクのブログ本文の文頭">ブログタイトル１</a> : <a id="link__inpage_23" href="http://●●.blog21.fc2.com/blog-entry-△△.html" title="このリンクのブログ本文の文頭">ブログタイトル２</a> : <a id="link__inpage_25" href="http://●●.blog21.fc2.com/blog-entry-□□.html" title="このリンクのブログ本文の文頭">ブログタイトル２</a> ： ： ※ ●●はブログID，〇〇や△△や□□は記事のナンバー（1～1500ほど）です（順不同） このような形で、文字列が１５００行ほど並んでいます。（つまり１５００リンク分です） 何回でも、置換の手順を踏んでも構わないので、 : <a id="link__inpage_21" href="http://●●.blog21.fc2.com/blog-entry-〇〇.html" title="このリンクのブログ本文の文頭">ブログタイトル１</a> ↓ http://●●.blog21.fc2.com/blog-entry-〇〇.html,<a href="http://●●.blog21.fc2.com/blog-entry-〇〇.html" target="_blank">ブログタイトル１</a> ： という形に最終的に全行をリスト化したいのですが、どのような正規表現で置換していけばいいでしょうか？ 唐突で誠に恐縮ですが、ご存じの方がいらっしゃいましたら御教授のほどよろしくお願い申しあげます。
- ベストアンサー
- その他（プログラミング・開発）
- fc2ブログのプラグイン
すみません。 ほとんど、HTMLはわかりません。 fc2のブログで下記のプラグインを使っているのですが ttp://pcafe.blog3.fc2.com/blog-entry-304.html このままだと、新しい記事が小さな数字になり 古い記事が大きな数字になります。 これを逆にしたいのですが出来ますでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- ｆｃ2ブログに地図を貼ることはできますか？
グーグルマップでもヤフー地図でもなんでもいいのですが。 http://ionit.blog.fc2.com/blog-entry-43.html http://webdesignclass.blog.fc2.com/blog-entry-18.html 上記サイトを読んでみたのですが 画面左にある「リンク」アイコンが見当たりません。
- ベストアンサー
- ブログ
- ブログのページ作成 ２
何回もすみません。 ＦＣ２をしていますが、他の方のブログを参考に見ると http://○×.blog.fc2.com/blogというブログのリンクボタンを押すと http://○×.blog.fc2.com/blog-category-7.htmlというページに飛びます。 １ この後者のページはどうやって作るのでしょうか？ ２ また、このページはどこに保存しているのでしょうか？ その仕方や仕組みが今イチ分かりません。 詳しい方の初心者向けのアドバイスをお願いします。 なお、前回は間違えてhttp://○×.blog.fc2.com/blog-entry-7.html について質問しましたが、これはご回答下さった方のアドバイスで氷解しました。
- ベストアンサー
- ブログ
- high slideをFC2ブログで
http://saruyan.blog61.fc2.com/blog-entry-216.html こちらのサイトさんの記事を参考にして、highslideをFC2ブログに導入して、起動したのですが何枚も続けて画像を貼り付けると画像の右側にマージンが入るのですが、これを無くすためにはhighslideのどこを書き換えれば直るのでしょうか？ こちらがサンプルページになります http://sampleyoudesu.blog.fc2.com/blog-entry-1.html 使用しているhighslideのバージョンは3.3.8になります。 回答の方宜しくお願い致します。
- ベストアンサー
- JavaScript
- ブログでのリンクの仕方
ブログ初心者です。 ＦＣ２をしていますが、他の方のブログを参考に見ると http://○×.blog.fc2.com/というブログのリンクボタンを押すと http://○×.blog.fc2.com/blog-entry-1.htmlというページに飛びます。 １ この後者のページはどうやって作るのでしょうか？ ２ また、このページはどこに保存しているのでしょうか？ その仕方や仕組みが今イチ分かりません。 初心者ですので、詳しい方の初心者向けのアドバイスをお願いします。
- ベストアンサー
- ブログ
- このようなサイトはブログですか？ホームページですか
http://hpmanual.blog81.fc2.com/blog-entry-18.html このようなサイトはブログですか？ホームページですか？ 見た目はホームページだけど、 ＵＲＬには「blog」と入っているし 「ブログ内検索」という窓があります。 でも日付順に表示されてないし、 日記っぽくないのですが、 これはブログなのでしょうか？
- ベストアンサー
- ブログ
- 相違があるのでしょうか？
名前と画像に相違がありますか？ http://ginjimasu.blog39.fc2.com/blog-entry-3759.html
- ベストアンサー
- アイドル・グラビアアイドル
- このソフトは？
http://guitaryman.blog16.fc2.com/blog-entry-88.html このブログで 再生ボタンと停止ボタンがある音源が聴けるところについて これは なにかソフトを使っているのでしょうか？ ソフトであれば どこで購入できるのでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
byDesign様 ご回答有難うございます。 サンプルまで作って頂き本当にありがとうございます。 教えて頂いたものを参考に勉強してみようと思います。