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

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  2. JavaScript

    【TweenMax.js】アニメーション終わりに関数を呼び出す!

    最近はWebアプリでアニメーションが必要になったときに、「Twen…

  3. JavaScript

    JavaScriptでグローバル変数の使いどころを見直してパフォーマンスを改善する

    JavaScriptのコードの中では、どこにデータを格納するかでコ…

  4. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  5. JavaScript

    「offset」で取得した値を使い回す

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

最近の記事

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

アーカイブ

  1. 日常

    撮影とスキー
  2. 日常

    コマカイナオシ
  3. GR PARTY

    イベント

    GRファンのための「GR PARTY」に行ってきた
  4. 日常

    風邪よさらば
  5. 日常

    人、人
PAGE TOP