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

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

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

  2. JavaScript

    配列に入れた無名オブジェクトの値をクリアする

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  3. JavaScript

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

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

  4. JavaScript

    背景画像をJavaScriptで入れ替える2種類の方法

    ものごとには「正解」というものがひとつではない、ってことが多いもん…

  5. JavaScript

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

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

  6. JavaScript

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

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

最近の記事

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

アーカイブ

  1. 日常

    ギャラ交渉中
  2. そうだ、野菜とろう。ジャーサラダの作り置き用にメイソンジャーを買った!

    テーブルウェア

    そうだ、野菜とろう。ジャーサラダの作り置き用にメイソンジャーを買った!
  3. プロダクト

    普通のTカードに飽きたから「お父さんTカード」もらってきた
  4. peanuts

    プロダクト

    MOLESKINE × PEANUTS
  5. MTG

    【MTG】「ギルド門侵犯」発売記念FNMで記念プロモもらってきた
PAGE TOP