JavaScript

WebアプリでCanvasを使うための指定方法

canvas

Webアプリをデザインするときのお決まりになりつつあるHTML5の「canvas」タグ、こいつを使うための定義はすごく簡単です。助かりますね〜。
まずはHTML5でのマークアップです。

  1. canvas要素のマークアップ
  2. widthとheightが指定されていなければ、width=”300″とheight=”150″になるみたい。

    1
    
    <canvas id="cvs_top" width="720" height="936"></canvas>
  3. CanvasのAPIを使えるようにする
  4. JavaScriptで以下のようにします。

    1
    2
    
    var canvas = document.getElementById('cvs_top');
    var top = canvas.getContext('2d');

あとはこの「top」を使ってごにょごにょやっていきます。
これはらくちん。

関連記事

  1. fb022d1ac056d555673c17937de7f431.png

    JavaScript

    強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

    jQueryでもアニメーションはできるのですが、それよりも表現力豊…

  2. about_debug-4.jpg

    JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

  3. js_comment.jpg

    JavaScript

    JavaScriptでコメントは「/* */」をなるべく使わないようにしたい

    コメントには囲った部分をすべてコメントにする「/* */」と、1…

  4. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  5. js_global.jpg

    JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

  6. css_sprite.jpg

最近の記事

  1. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  2. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  3. 【コレクション】カードダス:SDガンダム外伝シリーズ
  4. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  5. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  6. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  7. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  8. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  9. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  10. コミックのイラストが新鮮だった!『MARVEL展』

アーカイブ

  1. 日常

    会社スタート
  2. 話題になっていた「10分どん兵衛」を試してみた♪

    グルメ

    話題になっていた「10分どん兵衛」を試してみた♪
  3. new_memory08

    Mac

    ついにMacBook Proのメモリを増設! 8GBで快適♪
  4. はやぶさ、おかえり

    日常

    はやぶさ帰還一周年記念!
  5. 日常

    レギュラーの仕事
PAGE TOP