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. js_style.jpg

    JavaScript

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

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

  2. tweenmax_js_totation.jpg

    JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

  3. js_global.jpg

    JavaScript

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

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

  4. offset_style_data.jpg

    JavaScript

    「offset」と「style」で取得する値が違う

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

  5. offset_style.jpg

    JavaScript

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

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

  6. getElementById

    JavaScript

    JavaScript内で、HTMLのIDを直接指定したらダメ

    Webアプリをデザインしていて、JavaScriptの記述について…

最近の記事

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

アーカイブ

  1. 日常

    フリーの日々
  2. 日常

    おもしろくなりそうだ
  3. 日常

    『書体を読む。』
  4. 日常

    え、翻訳されてんの!?
  5. 日常

    いきたいショップ
PAGE TOP