« [Web作成] 通知メッセージ | トップページ | [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮 »

2016年8月 1日 (月)

[Canvas]Windowサイズに合わせてCanvasをリサイズ

最近、HTML5でJavaScriptから図を描くことができるCanvasについて、興味を持ち始めました。
手始めに、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 (別ウィンドウ表示)

|

« [Web作成] 通知メッセージ | トップページ | [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮 »

HTML・CSS・JS関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: [Canvas]Windowサイズに合わせてCanvasをリサイズ:

« [Web作成] 通知メッセージ | トップページ | [HTA]表示内容に合わせてウィンドウ縦方向自動伸縮 »