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. JavaScript

    クエリーストリングを利用してWebページ間でデータを受け渡してみる

    「クエリーストリング」っていうのは以下のようなGoogleで検索し…

  2. JavaScript

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

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

  3. JavaScript

    正規表現で入力されたテキストが有効かをチェックする

    テキストボックスに入力されたテキストが整数かどうかをチェックします…

  4. JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  5. JavaScript

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

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

  6. JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 展覧会

    ロケット発射音体験で腹が震えた「宇宙展」のオススメ3つ
  2. 日常

    バックパック
  3. LEGO はやぶさ

    LEGOはやぶさ

    レゴ「はやぶさ」発売日決定!!先行販売も!!
  4. iPhone

    ようやくiPhone5を買いました。おまけでもらった「お父さんグラス」が意外と良…
  5. 日常

    『graphic DESIGN cookbook』
PAGE TOP