GWT: 標準ライブラリのHTML5Canvasを利用する

GWTでHTMLCanvasを利用するには、過去にはサードパーティ製のライブラリ、例えば、

• GWT Incubator
• lib-gwt-svg 　・・・　本BLOGでも紹介

などがありましたが、今では　「com.google.gwt.canvas」の中に取り込まれています。以下、簡単な使い方です。

  Canvas canvas = Canvas.createIfSupported();
  canvas.setWidth("400px");
  canvas.setHeight("400px"); 
  canvas.setCoordinateSpaceWidth(400);
  canvas.setCoordinateSpaceHeight(400);
　Context2d context = canvas1.getContext2d();

上記には少しポイントがありまして、Canvas領域のサイズを変更するには、

setCoordinateSpace****();

というのを使わないといけないということ（これを理解するのに苦労しました）。

あとは、Context2dに対して描画のメソッドを呼ぶだけです。例えば下記のようにです。

context.fillRect(x,y,w,h);//塗りつぶした四角形を描く。尚、塗りつぶす色の指定はfillStyleプロパティで設定する。
context.strokeRect(x,y,w,h);//線だけの四角形を描く。尚、線の色の指定はstrokeStyleプロパティで設定する。
context.clearRect(x,y,w,h);//四角形の内容を消去する。
context.rect(x,y,w,h);//他のパスと組み合わせて四角形を描く。
context.fillText(text,x,y,[maxWidth]);//塗りつぶしのテキストを指定座標に描画する。
context.strokeText(text,x,y,[maxWidth]);//線だけのテキストを指定座標に描画する。
context.moveTo(x,y);//パスを作成する際に指定座標に移動させる。
context.lineTo(x,y);//直線を描画する。
context.stroke();//lineToメソッドなどで描画したパスを表示する。

その他にも、図形の回転、イメージ・映像の描画、描画した内容の保存などができるメソッドがあり、様々な表現がCanvas上で実現できるようになっています。

P.S
後記事の

• UiBinder編

のほうがオススメです。