BLOG

2014年6月22日/

[HTML5,javascript] Canvasの基本的な使い方

 

HTML5 から新しいタグ<Canvas>が登場しました。

 

これを利用すると、ブラウザ上に図形を描いたり、画像を読み込んだりすることができます。

 

今回は<Canvas>を使って四角形、直線、三角形を描いてみます。

 

完成画面は下記のようになります。

完成画面

 

まずはHTML にcanvasを設置します。ここでは「test_canvas」というidをつけておきます。

■HTML

 

続いてこのcanvas上にcanvasと同じ大きさの黒い四角形、白い直線、青の三角形をjavascriptを使って描きます。

 

■javascript

 

5,6行目で、test_canvasを取得して、コンテキストを取得します。

 

コンテキストとはcanvasの描画に必要な機能をまとめたものです。これを利用して図形を描画していくことになります。

 

四角形の描画は、

となっており、context.fillStyleで色を指定し、context.fillRectで四角形を描画しております。因数は(x座標,y座標,幅,高さ)となります。

 

続いて線の描画です。

context.strokeStyleは線で線の色を指定します。

その後、beginPath()で新しいパスを生成し、moveToで開始座標の指定、lineToで終点座標の位置を指定し、stroke()で線を描画します。lineWidthで線の太さを指定することも可能です。

 

最後に三角形の描画です。

途中まで線の描画と同じで、もう1つlineToで座標を指定し、最後にclosePath()で開始座標と最後に指定した座標を結んでくれます。

 

 

 

 

 

Resent Posts

Category