プログラミングで飯を食え。腕をあげたきゃ備忘録!

PHP、JavaScript、HTML5、CSS3などWEB系言語を中心に基本テク、備忘録をまとめます。Android、Iphoneアプリ開発についても!

2013-05-12から1日間の記事一覧

HTML5のcanvasを使ってAndroidアプリ!描画練習⑤

サクウェブTVはコチラ↓↓↓ さて、もう少し細工してみます。 前回はfor文を使用して線を一気に描画しましたが、これを一定時間ごとに1本ずつ描画することで少し、アニメーションのように見えるかもしれません。 やってみましょう。 利用するのはsetInterval…

HTML5のcanvasを使ってAndroidアプリ!描画練習④

サクウェブTVはコチラ↓↓↓ では、スクリプトをいじって描画を変えてます。 単純に線を増やしてみましょう。 描画処理を以下のように書きかえます。 for(var i=0;i<60;i++){ c.beginPath(); c.moveTo(10,10); c.lineTo(10+i*5,290); c.stroke(); } for文で線…

HTML5のcanvasを使ってAndroidアプリ!描画練習③

サクウェブTVはコチラ↓↓↓ さて、描画処理です。 前回のようにcanvas要素を描画オブジェクトとして取得したら、取得したオブジェクトに必要なメソッドを適用することで図形を描画できます。 今回は直線しか使用しませんが、円弧、ベジュ曲線など様々な描画…

HTML5のcanvasを使ってAndroidアプリ!描画練習②

サクウェブTVはコチラ↓↓↓ 開発開始 では開発を始めます。 assetsフォルダのwwwフォルダにjsフォルダを作成し、その中にscript.jsを作成してください。 次に、index.htmlを以下のように書きかえてください。 index.html <html> <head> <meta charset="utf-8"> <title>描画</title> <script type="text/javascript" src="jsWaffle.js"></script> </meta></head></html>

HTML5のcanvasを使ってAndroidアプリ!描画練習①

サクウェブTVはコチラ↓↓↓ こんにちは。 今回は、HTML5のcanvasの練習も兼ねて、簡単な描画を練習してみようと思います。 どうせなら前回までやっていたjsWaffleでAndroidアプリ化してみようかと思います。 開発環境の準備 jsWaffleのインストール jsWaffle…