Menu

Category

Archive

logo


Modernizr0 [ canvas ]

2013-12-22 05:16:00 +0900
  • このエントリーをはてなブックマークに追加

Modernizr は MIT ライセンスのオープンソースライブラリ。HTML5/CSS3のサポートがあるかどうかを簡単に判断することができる。

1 <head>
2 <meta charset="utf-8">
3 <title>Dive Into HTML5</title>
4 <script src="modernizr.min.js"></script>
5 </head>
1 if (Modernizr.canvas) {
2 // let's draw some shapes!
3  
4 } else {
5 // no native canvas support available :(
6  
7 }

nomodernizr_init() という関数が、Modernizr というグローバルオブジェクトを作成するので、上記のようにサポートされているか確認する。

内部では、

1 if (Modernizr.canvas) {
2 function supports_canvas_text() {
3  if (!supports_canvas()) { return false; }
4  var dummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d');
5  return typeof context.fillText == 'function;
6 }

このようにダミーの canvas をエレメントを作成し、メソッドがあるか確認している。