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

サクウェブＴＶはコチラ↓↓↓

さて、描画処理です。

前回のようにcanvas要素を描画オブジェクトとして取得したら、取得したオブジェクトに必要なメソッドを適用することで図形を描画できます。

今回は直線しか使用しませんが、円弧、ベジュ曲線など様々な描画が可能です。

では、描画の基本を説明していきましょう。

今回、描画オブジェクトが格納されているのは変数cです。

変数cに対してメソッドを適用しましょう。

まずは、

c.beginPath();

です。このメソッドはパスを開始する宣言をするものです。

基本的に線の描画は

beginPath()にはじまり、closePath()で終わるというイメージを持っておくとよいでしょう。

※closePath()は必須ではありませんが。

では次にパスを引いていきます。

c.moveTo(10,10);

これは画面上のcanvasのどこに最初のペンを置くのかをxy座標で指定しているとイメージしてください。

ここからパスの動きが始まります。次に、今置いたペンを移動させましょう。

c.lineTo(100,290);

ペンは(x,y)=(100,290)とい座標に移動しました。

しかし、この状態で実行をしてみてもまだ画面には何も描画されません。

これはペンの通る道筋（パス）を指定したに過ぎないからです。

実際に色のついた線を描画するためには以下のメソッドを実行します。

c.stroke();

これで、指定したパスに赤色の線が描画されることになります。

ここまでを実行してみると以下のような斜線が描画されているはずです。

こんな風にして、canvasは利用していきます。

同じ要領で円弧、ベジュ曲線等を描画するメソッドも用意されています。

それについてはまた別の記事で紹介することにしましょう。

しかし、今作ったものは、ただ１本の斜線が描画されているに過ぎないので、全然面白くありません。

次回からこれを少しずつカスタマイズしていきましょう。

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