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

    JavaScript

    JavaScriptでテキストボックスから値を取得する

    テキストボックスに入力された値を取得します。Elementオブジ…

  3. style_backgroundImage.jpg

    JavaScript

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

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

  4. scope.jpg

    JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

  5. tweenmax_license01.jpg

    JavaScript

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

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

  6. about_debug-4.jpg

    JavaScript

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

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

アーカイブ

  1. 日常

    「さよなら ナム・ジュン・パイク展」
  2. 【UNIQLO】LEGOのTシャツ・シリーズを確保。レゴとは気がつかない人もいるかもね。

    ファッション

    【UNIQLO】LEGOのTシャツ・シリーズを確保。レゴとは気がつかない人もいる…
  3. WWDC2012

    Appleイベント

    Macラインナップがアップデートした『WWDC2012』の個人的感想メモ
  4. 日常

    校正の日
  5. 日常

    それぞれのデザイン
PAGE TOP