キャンバスグラフを作成するためには、標準の "jpgraph.php" ファイルに加えて "jpgraph_canvas.php" ファイルをインクルードする必要があります。また、便利なサポートクラスにアクセスするために "jpgraph_canvtools.php" をインクルードすることもあるかもしれません。

キャンバスの作成で、"白い"紙に好きな形を自由に描画することができます。最初に、テキストボックスを描くだけの簡単な例を紹介しましょう。最初にこれから説明するコードを紹介します。

(File: canvasex01.php)

 <?php 
// $Id: canvasex01.php,v 1.3 2002/10/23 08:17:23 aditus Exp $ 
include "../jpgraph.php"; 
include "../jpgraph_canvas.php"; 
 
// 基本キャンバスの設定 
$g = new CanvasGraph(400,300,'auto'); 
$g->SetMargin(5,11,6,11); 
$g->SetShadow(); 
$g->SetMarginColor("teal"); 
 
// テキストが上書きされてしまうため、テキストを追加する前に 
// プロットエリアとマージンを出力する必要がある
$g->InitFrame(); 
 
// 中央にテキスト ボックスを描く 
$txt="This\nis\na TEXT!!!"; 
$t = new Text($txt,200,100); 
$t->SetFont(FF_ARIAL,FS_BOLD,40); 
 
// テキストボックスが座標をどのように解釈するか
$t->Align('center','top'); 
 
// パラグラフをどのように位置揃えするか
$t->ParagraphAlign('center'); 
 
// テキストの周りに、白い塗りつぶし、黒い縁取り、灰色の影のボックスを追加する 
$t->SetBox("white","black","gray"); 
 
// テキストを出力する 
$t->Stroke($g->img); 
 
// グラフを出力する 
$g->Stroke(); 
 
?>

上の例は 400 x 300 のサイズのイメージを作成する部分から始まります。その後イメージの周りの余白を設定します。キャンバスでは、座標を入力する方法に余白の影響はありません。左上は(0,0)で、右下（余白と影を含む）が最大値です。この場合、X座標は0〜399 Y座標は0〜199 となります。

その後、余白とプロットエリアをグラフに出力する InitFrame() メソッドを呼び出します。全てのグラフィカルオブジェクトはコマンドが呼び出される順番に出力されるので、最も手前に表示したいオブジェクトは最後に出力するように気を付けてください。JpGraph の通常の動作とは異なり、オブジェクトを追加すると全てその順番で反映されるので、正しい順番で出力されているか確認するようにしてください。

次に、Text オブジェクトを作成し、テキストを表示させたい場所をスクリーンの絶対位置で指定し、それを出力します。名前が非常に紛らわしい関数 Text::Align() の詳細な説明が必要になるかと思います。このメソッドは、テキストの座標をどのように解釈させるか を決定します。例えば、テキストパラグラフの座標として (200, 10) を指定された場合、これが左上の角を意味するのか、左下を意味するのか、それともそれ以外で、ボックスの範囲を示す値なのか、といったことを判断させます。上記のコードでは、X座標がボックスの中心を意味し、Y座標がトップを意味するように解釈させました。したがって、パラグラフを囲むボックスのトップラインの中央が (200, 100) に設定されます。

Text::ParagraphAlign() を使用して中央に寄せられているパラグラフの中にもラインを指定することができます。テキストの周りにボックスを表示させる場合は、ボックスの塗りつぶす色、ボーダーカラー、シャドウカラーを設定することができるText::SetBox() が役に立ちます。

ここで、キャンバス上でテキストを出力する準備をします。そのためには、使用したい基本イメージの描画クラスを指定しなければなりません。これについてはこれ以上の解説はせず、Graph クラスのimg プロパティとして存在する image クラスについてのみ記述します。

これでようやくブラウザにキャンバスを出力する準備ができました。以下の画像でこのコード結果を全て見ることができます。

10.2 簡単なキャンバスの作成