太巳Tweetパスという概念を理解して、直線を書こう!前回では矩形(四角形)を描くstrokeRectメソッドやfillRectメソッドを紹介しました。これらは、呼び出すだけで矩形の線を描いたり、塗りつぶした矩形を描いたりすることができ、非常に分かりやすいメソッドでした。これらのメソッドはCanvasにおいて例外的といっても良いでしょう。通常、Canvasではパスという概念を使って図形を描きます。今回は、このパスの使い方について詳しく解説していきます。直線を書いていきましょう。白い紙に鉛筆を使って線を描くシーンを想像してください。最初に、頭の中で線を描こうと考えますよね(beginPathメソッド)。次に、書き始める場所に鉛筆を置きます(moveToメソッド)。鉛筆を動かします(lineToメソッド)。これで線が描かれます。Canvasでも、これによく似たことをメソッドの呼び出しによって行うのです。Canvasではパスを定義しただけでは何も表示されません。パスを定義した後に、strokeメソッドを呼び出すことで線がパスの上に描かれます(リスト1)。画像をクリックすると拡大しますbeginPathメソッドは、これからパスを定義すると宣言するためのメソッドです。これを最初に呼び出さないと、期待通りにパスを定義できませんので、忘れないように呼び出してください。このメソッドに引数はありません。moveToメソッドには、線の開始地点の座標を引数に与えます。lineToメソッドには線の終了地点の座標を引数に与えます。moveToメソッドで指定した座標から、lineToメソッドで指定した座標まで結んだ直線がパスとして定義されます。このサンプルコードでは、横向きの直線を表すパスを定義したことになります。Canvasではパスを定義しただけでは何も表示されません。最後にstrokeメソッドを呼び出すことで、初めてパス上に線が描かれます。直線を連続して描く直線を連続して一筆書きのように描きたい場合は、lineToメソッドを繰り返し呼び出します。ここでは、三角形を描くサンプルを見ていきましょう(リスト2)。moveToメソッドで開始点を指定します。次に、三角形の各頂点を結ぶように、lineToメソッドを呼び出します。lineToメソッドは、呼び出される直前のパスの終点から、引数に与えられた座標を直線で結ぶパスを定義します。そのため、このサンプルのように異なる座標を指定しながら連続してlineToメソッドを呼び出すと、一筆書きのように直線を組み合わせたパスが定義できるのです。futomi代表取締役。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。PerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。IT会員サービスの概要とメリットをチェック他にもこの記事が読まれています開発ツールイベントGitHub、エンタープライズ向けのイベントを国内で開催。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。