[Canvas]Windowサイズに合わせてCanvasをリサイズ
最近、HTML5でJavaScriptから図を描くことができるCanvasについて、興味を持ち始めました。
手始めに、Windowサイズに合わせてCanvasサイズをリサイズしたいぞと思ったら、CSSによる指定も含め純粋な縦横100%指定ができないことが判明(´・ω・`) あぁ、JavaScriptでガシガシ書けとおっしゃいますか。そうですか。
というわけで、さっそく作成してみました。
動作としては、ウィンドウをリサイズすると、ウィンドウサイズに合わせてCanvas領域をリサイズするだけです。
それにしてもHTML5は、各タグの記述がかなり省略できるようになったのが良いですね!(  ̄▽ ̄)b
今回のサンプルは、IE8以前は未サポートです。(けれど、uupaa-excanvas.js か ExplorerCanvas(excanvas.js)で対応可能になるかと思います。
手始めに、Windowサイズに合わせてCanvasサイズをリサイズしたいぞと思ったら、CSSによる指定も含め純粋な縦横100%指定ができないことが判明(´・ω・`) あぁ、JavaScriptでガシガシ書けとおっしゃいますか。そうですか。
というわけで、さっそく作成してみました。
動作としては、ウィンドウをリサイズすると、ウィンドウサイズに合わせてCanvas領域をリサイズするだけです。
それにしてもHTML5は、各タグの記述がかなり省略できるようになったのが良いですね!(  ̄▽ ̄)b
今回のサンプルは、IE8以前は未サポートです。(けれど、uupaa-excanvas.js か ExplorerCanvas(excanvas.js)で対応可能になるかと思います。
実際に動作するhtmlファイルは、次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_canvas_resize.html (別ウィンドウ表示)
http://fjiblog.cocolog-nifty.com/html/fji_canvas_resize.html (別ウィンドウ表示)
| 固定リンク
「HTML・CSS・JS関連」カテゴリの記事
- [Canvas]Windowサイズに合わせてCanvasをリサイズ(2016.08.01)
- [Web作成] 通知メッセージ(2016.05.04)
- [JS] ストップウォッチ(2013.08.26)
- [Web作成] アコーディオンメニュー(2012.07.04)
- [Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ(2012.05.22)
コメント